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

网站编辑01 2022-07-18 15:24:34 阅读:36

  一、流程与思路分析

  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服务,所以此处配置了自定义源站域名,大家可以按照自己的实际情况选择最合适的配置。

  

详解用户图片上传流程


  需要注意的是如果使用第三方CDN服务,记住这个默认分配的CNAME,CDN配置回源策略时,填写这个CNAME。

  

详解用户图片上传流程


  三、CDN配置

  1. 添加CDN加速域名

  登录腾讯云——>控制台——>CDN内容分发网络——>域名管理——>添加域名

  

详解用户图片上传流程


  2. 配置回源及缓存等策略

  此处以我的oss.cuiliangblog.cn对象存储域名举例,其中回源策略填写七牛云对象存储的CNAME。

  

详解用户图片上传流程


  四、DNS配置

  1. 添加域名解析记录

  登录阿里云——>控制台——>域名——>解析

  

详解用户图片上传流程


  新增一条oss.cuiliangblog.cn的CNAME域名解析记录,记录值填写腾讯云CDN的CNAME值

  

详解用户图片上传流程


  2. 访问验证

  至此,存储服务和CDN以及DNS配置已全部完成,接下来做一个简单的测试

  七牛云——>控制台——>对象存储——>空间管理——>文件管理——>上传文件,随便选择一张图片资源上传


二维码