问题所在:
开发一个关于文件上传的功能,大概流程:选择好文件之后,文件上传界面被隐藏,显示一个表单验证页面,用来告知用户文件中的一些信息,用户点击表单中的按钮之后才会真正向后端发送所上传文件。
这里我选择了el-upload
组件去写,按照惯性思维,如果并不是直接上传文件,那就两个步骤:
1.
el-upload
组件中设置::auto-upload="false"
2.在对应的上传点击事件中:this.$refs.upload.submit();
但是因为需求,我还需要将文件切片之类的操作(后来后端说不用😒),组件直接进行submit
不合要求,所以对我来说,el-upload
的作用只是收集上传文件。我选择FormData封装请求体,如下:
let formDate = new FormData();
formDate.append("file", this.uploadFile);
this.uploadFile
是我从el-upload
中获取到的上传文件,之后未对文件进行其他操作,发送请求之后,在Network
里面发现请求体file
参数对应的值是[object,object]
类型,后端也获取不到文件流。打印了一下this.uploadFile
,发现里面还封装了一层,于是用this.uploadFile.raw
尝试了一下,没想到成功了,请求体file
参数对应的值是binary
类型,后端也收到了文件。
由此,我就思考了一下,submit
方法会对文件做处理,保证请求体里传输的是binary
类型的文件。