ant design vue 手动上传(上传成功)但后台无法获取文件

跟后台同事调试了半天,前台这块能打出一个日期一个上传文件。

 console.log(formData.get('file'))       //能打印出上传文件
 console.log(formData.get('acctMonth'))  //能打印出日期

上传是反馈200成功,但后台就是显示找不到上传文件。

handleUpload() {
  if (this.acctMonth == "") {
    this.$message.error("请选择账期!")
    return false;
  }
  if (this.fileList == "") {
    this.$message.error("请选择上传文件!")
    return false;
  }
  const { fileList } = this;
  const formData = new FormData();
  let token = Vue.ls.get(ACCESS_TOKEN);

  fileList.forEach((file) => {
    formData.append("file", file);
  });
  formData.append("acctMonth", this.acctMonth);
  this.uploading = true;
  
  console.log(formData.get('file'))       //能打印出上传文件
  console.log(formData.get('acctMonth'))  //能打印出日期

  reqwest({
    url: apiUrl.upload,                  //后台上传接口
    method: 'post',
    data: formData,
    headers: {                           //框架需要支持token才能上传
      "content-type": "multipart/form-data",
      "X-Access-Token": token
    },
    success: () => {
      console.log(formData.getall())
      this.fileList = [];
      this.acctMonth = '';
      this.uploading = false;
      this.$message.success('文件上传成功.');
    },
    error: () => {
      this.uploading = false;
      this.$message.error('文件上传失败.');
    },
  });
},
阅读 4.6k
2 个回答

两个可能。

  1. 前端发的并不是 form-data
  2. 发送的时候把文件丢了。或者名字(文件名)不对。有的框架会要求文件名。

可以考虑把 network 搞出来看看


百度都怀疑我搜索错了
image.png


看上去是你写的不对。

reqwest({
      url: '/safe/face/faceCompareForSavePic',   //这块是你项目的接口
      method: 'post',
      processData: false,
      data: formData,
      success: () => {
        this.setState({
          fileList,
          uploading: false,
        });
        message.success('upload successfully.');
      },
      error: () => {
        this.setState({
          uploading: false,
        });
        message.error('upload failed.');
      },
    });
新手上路,请多包涵

后台加@Anonymous注解即可解决,接口没有权限所以后台接收不到

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题