免费上传图片怎么操作（详解用户图片上传流程）

技术中心 2022-07-18 15:25:15 0 xiang2024

　　一、流程与思路分析

　　1. 整体流程图

　　2. 流程分析

　　用户图片上传以及显示整个过程可分为以下几个阶段：

　　页面加载阶段

　　当用户访问https://www.cuiliangblog.cn/applyLink时，前端nginx服务器接收请求(如果配置了CDN，DNS会智能解析到CDN节点处理请求)，返回页面数据给用户，浏览器加载并显示页面

　　用户上传图片阶段

　　用户选择好本地图片文件，点击开始上传操作后，浏览器向后端API接口发送请求，获取此次上传操作的token

　　API后端接收到请求后，使用七牛SDK请求七牛云存储服务，获取上传token后将token返回给客户端

　　客户端使用token上传文件至七牛对象存储服务，上传成功后，七牛存储返回客户端资源的URL地址给客户端

　　浏览器请求图片资源阶段

　　客户端根据图片URL地址请求CDN服务，CDN节点发现没有找到资源后回源至七牛对象存储服务，获取文件资源成功后缓存至CDN并返回给客户端

　　用户提交表单阶段

　　用户提交表单，表单内容中包含资源的URL地址请求后端API接口

　　后端API接口保存图片资源URL地址

　　3. 开发需求分析

　　本案例使用如今最流行的前后端分离开发模式。

　　前端使用vue3开发，主要实现用户选择本地图片后裁剪成文件blob，以及将文件流和token直接请求对象存储服务，实现文件上传两个功能。

　　后端使python开发，借助Django REST framework框架开发api接口。安装七牛对象存储的sdk，通过请求七牛服务，获取本次操作的token，并返回给前端。

　　4. 运维配置分析

　　本案例使用主流的企业网站项目配置，使用公有云的OSS对象存储服务、CDN内容分发网络以及DNS域名解析。此处选用七牛云对象存储和腾讯云CDN以及阿里云的域名解析，其他公有云厂商产品名称和配置项可能略有差异，但基本原理都是一样的，操作步骤也并无差别。

　　没有注册的小伙伴们可以使用以下链接进行注册

　　七牛云：https://s.qiniu.com/VVfMnq

　　阿里云：https://www.aliyun.com/1111/new?userCode=gs1gd34d

　　腾讯云：https://curl.qcloud.com/yXdJdtu9

　　二、对象存储配置

　　此处使用七牛对象存储，有10G免费空间，对于一般小业务场景完全够用。

　　1. 创建云存储空间

　　登录七牛云——>进入控制台——>点击对象存储——>然后点击新建空间

　　填写表单完成存储空间的创建，完后后七牛云会自动为我分配一个测试域名，这样我们就可以使用这个域名进行上传/下载文件了。

　　需要注意的是：测试域名只能使用30天!!并且测试域名只能使用HTTP协议，不支持HTTPS协议

　　2. 对象存储服务绑定域名

　　因为我已经购买过域名cuiliangblog.cn。所以接下来绑定oss.cuiliangblog.cn给这个存储空间即可。需要注意的是，虽然七牛云的对象存储服务免费，但是CDN加速服务是收费的，我已经够买过腾讯CDN服务，所以此处配置了自定义源站域名，大家可以按照自己的实际情况选择最合适的配置。