关于elementui+vue+axios+servlet上传文件的问题!


<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