<template>
<div>
<el-upload
class="upload-demo"
ref="upload"
action="/api/onclick"
:on-change="onchange"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<input type="text" v-model="texts">
</div>
</template>
<script>
import {dianjiAPI} from '@/request/api.js'
export default{
name:'HelloWorld',
data() {
return {
fileList: [],
texts:'aaaa'
};
},
methods: {
submitUpload() {
let formdata=new FormData()
formdata.append('texts',this.texts)
this.fileList.forEach((file)=>{
formdata.append('file',file.raw)
})
console.log(formdata.getAll('file'))
dianjiAPI(formdata,(res=>{
console.log(res.data)
}))
//this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
//往fileList列表添加文件
onchange( file,fileList){
this.fileList=fileList
}
}
}
</script>
export const dianjiAPI = (data) => request.post('onclick', data);
后端采用@MultipartConfig实现数据接收
当我使用axios实现调用一次接口多文件上传时
报错the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/x-www-form-urlencoded
查资料后加了请求头Content-Type:multipart/form-data
当我加上后说the request was rejected because no multipart boundary was found
查资料又说要加boundary=-WebKitFormBoundary7MA4YWxkTrZu0gW
加上后前后端不报错了
但是后端收到的数据为空
发现问题是
设置的boundery
Content-Type:multipart/form-data;boundary=-WebKitFormBoundary7MA4YWxkTrZu0gW
下面是我们的http要解析的数据
WebKitFormBoundary40Ad6BBHxabZut
Content-Disposition: form-data; name="texts"
a
WebKitFormBoundary40Ad6BBHxabZut
Content-Disposition: form-data; name="file"; filename="readme.md"
Content-Type: application/octet-stream
WebKitFormBoundary40Ad6BBHxabZut--
这个数据使用的分隔符却是浏览器随机生成的,这样就导致分隔符无法识别,后端接收到的数据为空
网上有人说不用设置请求头,浏览器会自己生成请求头,但是不设置就会报错数据类型不对,后端接收不来,求问怎么解决。
可看:https://blog.csdn.net/weixin_45526437/article/details/122395308