春季启动时的多部分文件数组

时间:2020-04-12 09:13:20

标签: javascript reactjs spring-boot axios multipartform-data

[在此处输入图片描述] [1]添加多个多部分文件:-

 {
          this.state.imageUploads.map((image, index) => {
            return (
              <Fragment key={index}>
                <input type="file" name="myFile" onChange={this.onImageUpload(index)} />
              </Fragment>
            )
          })
        } 

函数和axios调用

onFileChangeHandler = e => {
e.preventDefault()
let imageUploads = this.state.imageUploads.concat([''])
this.setState({ imageUploads })}

onImageUpload = i => e => {
let imageUploads = [...this.state.imageUploads]
imageUploads[i] = e.target.files[0]
this.setState({ imageUploads })}

imageUploadSubmit = (productId) => {
let file = this.state.imageUploads
console.log("----this.state.imageUploads[0]---at index 0----------", this.state.imageUploads[0])
let token = localStorage.getItem("token")
let formData = new FormData();

formData.append('myfile', file)
try {
  Axios.post("/file/upload", formData,
    {
      headers: {
        'authorization': `Bearer ${token}`,
        'Accept': 'application/json',
        'Content-Type': 'multipart/form-data'
      }

    },
    {
      body: { data: formData }
    })
    .then(res => {
      const json = res.data;
      console.log("--------------after upload reasponse--------", json)
    })
} catch (err) {
  this.setState({
    error: "error in register"
  })}}

后端-弹簧启动控制器----

@PostMapping(value="/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public void uploadFile(@RequestParam("myfile") MultipartFile[] myfile) throws IOException {

    System.out.println("-----Test--myfile.size---"+myfile.length);
    System.out.println("-----Test---myfile--"+myfile);}[enter image description here][1]

当尝试上传此文件时-然后在请求中-我得到了这个文件而不是多部分文件,否则我的后端代码可以接受cn-

https://drive.google.com/open?id=1Oh1sEQbVCEOjuNpE0tkPRxTJKLoaaqPs

我已经尝试将对象类作为控制器中的接收参数,然后以对象形式获取数据,但是我该如何处理呢? 我尝试了单个多部分文件,但效果很好-但我必须传递多个多部分文件-?!!

0 个答案:

没有答案