使用 React.js 发布文件

IT技术 reactjs post spring-boot reactjs-flux
2021-05-04 03:15:55

最终用户应该通过文件浏览器上传一个 excel 文件：

<FloatingActionButton title="Upload excel" primary className="import-vendor"
                      containerElement="label"
                      label="Browse file">
      <input onChange={(e) => Actions.uploadXLS(e.target.files[0])} 
             type="file" 
             name="xls" 
             accept="application/vnd.ms-excel" 
             style={{ display: 'none' }}/>
      <UploadIcon/>
</FloatingActionButton>

行动 ： 

uploadXLS(file) {
    this.getInstance().callUploadXLS( file );
}

服务 ：

callUploadXLS: {
    remote( state, data ) {
        const url = `${base}/vendor/form`;
        return $http.instance.api.post( url, data );
    },
    success: Actions.XLSUploaded,
    error: Actions.fail
}

此文件应发送到使用 Spring Boot 构建的 POST REST 端点，该端点接受多部分文件。端点无法识别这样发送文件

error: "Internal Server Error"
exception :"org.springframework.web.multipart.MultipartException"
message : "Current request is not a multipart request"
path : "/vendor/form"
status : 500
timestamp : 1501747384079

我如何发布excel文件？

编辑：我现在正在尝试发布文件列表：

const arrayOfFile = [];
let i = 0;
for ( i = 0; i < files.length; i++ ) {
  const data = new FormData();
  arrayOfFile[i] = data.append( 'file', files[i] );
}
this.getInstance().callUploadXLS( arrayOfFile );

但是 data.append('file', files[i]); 总是不确定地返回

2个回答

将文件传递到后端是通过multipart/form-data表单完成的。

如果您检查您现在发送到后端的请求，您将看到您的请求没有发送（可能）一个multipart/form-data.

您可以查看参考enctype='multipart/form-data' 是什么意思？问题。

您的代码应该类似于：

callUploadXLS: {
    remote( state, file ) {
                // ^ make sure that `file` here is the same target.files[0]. It should be `File` Object

      // Will turn your form to `multipart/form-data`
      var data = new FormData();
      data.append('file', file);

      const url = `${base}/vendor/form`;
      return $http.instance.api.post( url, data );

    },
    success: Actions.XLSUploaded,
    error: Actions.fail
}

尝试使用好的文件上传器并检查元素检查您的网络选项卡，您的文件上传的 api 调用是否按服务器的预期发送正确的文件数据。测试来自Postman的 API，如果它可以工作，那么这意味着前端代码有问题，您可以比较标头发送的错误项目。

希望这个调试方法能帮助你认识到你的错误。

其它你可能感兴趣的问题
上一篇Prusa i3 MK3S 3D打印机PETG打印问题 下一篇在 Ultimaker Cura 中，除了线宽之外，喷嘴尺寸还有什么影响？