关于el-upload组件的submit方法的一些思考

Posted 2023-03-26

参考技术A

开发一个关于文件上传的功能， 大概流程：选择好文件之后，文件上传界面被隐藏，显示一个表单验证页面，用来告知用户文件中的一些信息，用户点击表单中的按钮之后才会真正向后端发送所上传文件。
这里我选择了 el-upload 组件去写，按照惯性思维，如果并不是直接上传文件，那就两个步骤：

但是因为需求，我还需要将文件切片之类的操作（后来后端说不用😒），组件直接进行 submit 不合要求，所以对我来说， el-upload 的作用只是收集上传文件。我选择FormData封装请求体，如下：

this.uploadFile 是我从 el-upload 中获取到的上传文件，之后未对文件进行其他操作，发送请求之后，在 Network 里面发现请求体 file 参数对应的值是 [object,object] 类型，后端也获取不到文件流。打印了一下 this.uploadFile ，发现里面还封装了一层，于是用 this.uploadFile.raw 尝试了一下，没想到成功了，请求体 file 参数对应的值是 binary 类型，后端也收到了文件。

由此，我就思考了一下， submit 方法会对文件做处理，保证请求体里传输的是 binary 类型的文件。