vue 请求接口时传递JOSN格式,如何完成文件上传?(语言-javascript)

我是使用 element 中的文件上传,代码如下:

           <el-upload
              :headers="{'Content-Type':'multipart/form-data'}"
              class="upload-btn"
              action="https://jsonplaceholder.typicode.com/posts/"
              accept=".xls, .xlsx"
              :http-request="imageChange"
              :show-file-list="false"
            >
              <el-button type="primary">EXCEL导入</el-button>
            </el-upload>

post请求

    // EXCEL导入
    async imageChange(res) {
      console.log(res);
      let obj = {
        title: "设备导入",
        data: {
          file: res.file,
        },
      };
      const { data } = await postdata(JSON.stringify(obj));
      console.log(data);
    },

log data 时打印出来的是:

img

我们后端接收的就是这种形式,其他普通的接口没问题,遇到文件上传 我前端歇菜了,我一看 Network 好家伙:

img

只有一个 uid 其他的传不上去,咱们的 new FormData() 方法我也试过了不行!!

   //以下的写法报错  说我传递的data 是一个空的连 uid 都没有了
  // EXCEL导入      new FormData 方式是我使用的不对吗还是传递数据的姿势不对?
    async imageChange(res) {
       let file = new FormData();
       file.append("file", res.file);
      let obj = {
        title: "设备导入",
        data: {
          file
        },
      };
      const { data } = await postdata(JSON.stringify(obj));
      console.log(data);
    }

上传解决思路,具体代码网上很多,可以自行搜索下:
1、上传到文件服务器上,然后将url存起来。
2、用流的形式上传(如果文件特别大使用分块),后端对应解析流即可。

你不JSON.stringify 试试

可以参考下面代码示例试试:

    async imageChange(res) {
       let file = new FormData();
       file.append("file", res.file);
       file.append("title","设备导入")
       const { data } = await postdata(file);
       console.log(data);
    }
postdata(file) {
  return Request({
      url: '/file/file/upload',  //后端上传接口
      method: 'post',
      data: file,
      headers: { 'Content-Type': 'multipart/form-data' },
      ......
})
}

楼主解决了吗??