上传文件流给后端的注意事项

249 阅读2分钟

背景

常规流程中,需要把文件传给公共服务器,然后回传地址,只需要把地址给对应的业务。

但敏感业务中,需要对应的文件放到业务域下,一个是增加安全性,一个是避免不必要的云资源空间浪费。

也有些场景是为了避免交互成本,比如点击了上传,但最终其实业务用不到,用户也不是强需求下次进入的时候,仍然展示。 这种可以借用本地文件进行展示,对于腾讯,也提供了一些云地址可以用于过程中的展示,业务需要的时候,再从腾讯云端下载这个文件即可。

文件流本身的注意事项

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 多图片合成新图片