背景
常规流程中,需要把文件传给公共服务器,然后回传地址,只需要把地址给对应的业务。
但敏感业务中,需要对应的文件放到业务域下,一个是增加安全性,一个是避免不必要的云资源空间浪费。
也有些场景是为了避免交互成本,比如点击了上传,但最终其实业务用不到,用户也不是强需求下次进入的时候,仍然展示。 这种可以借用本地文件进行展示,对于腾讯,也提供了一些云地址可以用于过程中的展示,业务需要的时候,再从腾讯云端下载这个文件即可。
文件流本身的注意事项
1 请求参数本身
之前的技术方案是需要使用form提交,现在不需要如此,只需要使用formData即可。
let data = new FormData();
data.append("file", file);
2 请求头的设置
这个设置也可以分为两种,一种是每个方法里增加,一种是传参的时候,增加统一的方法规则,比如传入类似file的标识,然后在请求的烂机器里做这个添加头的事情。
headers: {
"Content-Type": "multipart/form-data",
},
3 拿到原始的文件对象
目前大多数场景,都不需要我们手写上传控件,antd 和 element-ui 都会吧文件对象封装给我们,我们需要和后端同学达成协议,使用什么格式的文件他们才方便接受。
一种可能是,无论组件给的是何种,我们都可以转为Blob对象,然后传递给后端。
还有一种,就是传file对象,不过不同组件封装之后拿到的是不同的,
antd 中的原始文件对象是file.originFileObj ,而 ele中的上传控件,原始对象是file.raw .
其属性截图如下:
正常情况下,后端需要根绝这个标准对象拿到文件名,大小,类型,其中文件名中常规情况需要包含扩展名进行相关的判断,否则会导致错误。
4 因为整个请求变为一个常规的api 请求,而不是form的提交。
因此可以通过常规的response.code 来判断整体的请求是成功和失败,而不需要根据因为包含了文件流的上传给特殊的错误捕获。
扩展
你还遇到什么有关上传文件流的技术问题么?常见的还有:
1 上传大文件
2 上传多个文件
3 如何判断不包含后缀名的文件类型
4 上传压缩包
5 提供多个文件的压缩上传
6 取消或者恢复文件的上传过程
7 无损压缩图片
8 各种文件的预览
9 图片的裁剪
10 多图片合成新图片