Vue项目中ElementUI上传文件时携带表单数据进行手动上传

ElementUI的Upload组件携带表单数据进行手动上传

项目需求本来是文件单独上传，再提交表单数据，请求两次接口。现在需求有变，要求在触发表单传输事件的同时上传文件，也就是提交表单数据和上传文件同步进行，请求一次接口。
起初是准备使用upload组件自带的http-request来自定义事件，覆盖组件的默认上传行为，但那样需要自己重新创建formData对象之类的，感觉很麻烦，所以弃用了。
elementui中的upload组件上传文件时能附带额外的参数，所以我的思路是把表单数据作为上传时附带的额外参数提交给后台就好了。
下面废话不多说，直接上代码了：

选择上传证书只能上传.key/.crt文件，且只能上传两个添加

  data() {return {url: service.defaults.baseURL + "aaa/bbb", // 这里写上传文件的地址form: {ipArea: "",sourceMachineIp: ""}};},computed: {// 这里定义上传文件时携带的参数，即表单数据upData: function() {return {body: this.form}}},methods: {add(form) {this.$refs[form].validate(async valid => {if (valid) {// 表单验证通过后使用组件自带的方法触发上传事件this.$refs.upload.submit()} else {return false;}});},// 成功上传文件upFile(res, file) {if (res.status == 200) {// 文件上传成功后的回调，比如一些提示信息或者页面跳转都写在这里this.$message.success(res.info);} else {this.$message.warning(res.info);let _this = this;setTimeout(function() {_this.$refs.upload.clearFiles();}, 1000);}},// 上传文件超出个数handleExceed(files, fileList) {this.$message.warning(`当前只能选择上传2 个证书`);},//  移除文件handleRemove(res, file, fileList) {this.$message.warning(`移除当前${res.name}证书，请重新选择证书上传！`);}}

此时，当我点击添加按钮触发事件时，发现后台报了一长串的错

检查了一下，发现body携带的参数根本就读不出来，因为文件上传使用的是Content-Type: multipart/form-data;携带参数使用的是FormData格式，这就找到问题所在了，我们需要把表单数据转换一下格式，后台才能接收到。

将body的格式进行转换一下：

此时就能将表单参数和文件同时传给后台了


formData格式下在这里查看上传文件和表单数据的内容
至此，已实现在上传文件的同时提交表单数据的功能。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！