怎么上传照片到文件上怎样上传照片到文件里

最近在开发新版博客网站时，有几个页面需要使用图片上传功能。整个项目前端基于vue3的element-plue和vue-cropper组件库封装一个图片上传组件，后端使Django REST framework开发api接口，存储使用七牛对象存储，以及腾讯CDN加速，总结了完整的前后端代码以及运维配置，以供大家参考。
一、流程与思路分析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免费空间，对于一般小业务场景完全够用。

特别声明：本站内容均来自网友提供或互联网，仅供参考，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。

怎么上传照片到文件上 怎样上传照片到文件里

怎么上传照片到文件上怎样上传照片到文件里