使用React.js发布文件

Question

最终用户应该通过文件浏览器上传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]）; 总是返回未定义的

Answer 1

通过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
    }