免费上传图片怎么操作(详解用户图片上传流程)
一、流程与思路分析
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配置已全部完成,接下来做一个简单的测试
七牛云——>控制台——>对象存储——>空间管理——>文件管理——>上传文件,随便选择一张图片资源上传
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容请联系我们,一经查实,本站将立刻删除。
转载联系作者并注明出处:https://www.blogone.net/qiu/2337.html
标签:
相关文章