为什么拖拽上传文件在axios上传那步没法获取上传的文件？

Question

输出的分别是下面几个log出来的值，我这个文件一直上传不上去。话说后台让我加的boundary有什么作用吗？

<!-- 拖拽区域 -->
            <div class="index-drag"
                id="updataDrag"
                @dragover="updataDragover" 
                @dragenter="updataDragenter"
                @dragleave="updataDragleave"
                @drop="updateDrop">
                <div class="index-drag-iconBox">
                    <span class="el-icon-upload"></span>
                </div>
                <div class="index-drag-message">
                    <span class="index-drag-message-titles">将文件拖动到此处，或</span>
                    <label for="file" class="index-drag-message-label">
                      <!-- <form name="forms" action="http://192.168.1.170:8889/mtcPlan/mtcPlanCheck" method="post" enctype="multipart/form-data"> -->
                        <input class="index-drag-message-input" type="file" multiple='multiple' accept=".xlsx,.xls" id="file" name="file" @change="manualChange" />
                        <span class="index-drag-message-manual">点击上传</span>
                      <!-- </form> -->
                    </label>
                </div>
            </div>

 const submitUpdata = async (file:any) => {            
      state.networkName = null;
     
      console.log(file,typeof(file));
      let fileData = new window.FormData();
        fileData.append("file", file);
        fileData.append("filename", file.name);
        console.log(fileData.get('file'));
      let token = localStorage.getItem('userInfo');
      axios({
          method: 'post',
          url: 'http://192.168.1.170:8889/mtcPlan/mtcPlanCheck',
          headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': token
          },        
          data: fileData,
          onUploadProgress: function(progress:any){
            // console.log(typeof(progress))
            // 上传处理进度事件                    
            let network = parseInt(`${progress.loaded/progress.total * 100}`,10)
            state.network = network
            if(progress.loaded == progress.total){
              state.networkName = 'success';
              setTimeout(()=>{
                viselble.value = false;  
              },800);                         
            }else{
              state.networkName = null
            }
          },
          onDownloadProgress:function(progress:any){
              // 为下载处理进度事件
          }
      })
      .then(res => {
        console.log(res);
        
        // 具体状态码 自行判断 这里用别人的 状态码是 201 哈哈 真实提交不成功哈  
        if(res.status >= 200 && res.status <= 206){
          state.networkName = 'success'
        }
        if(res.status >= 400){
          state.networkName = 'exception'
        }
      })
    }

Answer 1

你这个是 FormData 的接口吗？那你上传的方式不对。

后端说加 boundary 是对的，但你不要自己在 JS 里拼。

你应该把 headers 去掉，然后 data 那里直接赋值成那个 FormData 对象：

axios({
    method: 'post',
    url: 'http://192.168.1.00:8889/mtcPlan/mtcPlanCheck',
    data: fileData
});

另外你 axios 也别有什么全局拦截器里有骚操作强制改变 Content-Type 啥的。

---

补充一个例子，见图：

P.S. 可能是上传后被思否压缩了，单独传两张：

你可以看到 FormData 的 boundary 是浏览器自动加的，不应该你手动加。你手动加会干扰下面 Payload 部分。