Antd multiple file upload background receiving null problem

In the antD development process, the Upload component is generally configured with the address of the back-end interface through action, and the file is automatically uploaded. However, when a large number of files are uploaded, manual upload is required. However, the background cannot receive data and the data is null.

Code implementation

The preceding component code is as follows:

    const onRemove = (file) = > {
      this.setState((state) = > {
        const index = state.fileList.indexOf(file);
        const newFileList = state.fileList.slice();
        newFileList.splice(index, 1);
        return {
          fileList: newFileList,
        };
      });
    };
    
    const beforeUpload = (file) = > {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if(! isJpgOrPng) { message.error('Please upload picture format file! ');
        return isJpgOrPng || Upload.LIST_IGNORE;
      }
      this.setState(state= > ({
        fileList: [...state.fileList, file],
      }));
      return false;
    };

    <Upload
      fileList={fileList}
      onRemove={onRemove}
      beforeUpload={beforeUpload}
      directory
      accept=".png,.jpg,.jpeg"
      showUploadList={false}
      onChange={this.onChange}
    >
      <Button
        icon={<UploadOutlined />}
      >
        Click to upload
      </Button>
    </Upload>
Copy the code

Front-end upload logic code:

    const formData = new FormData();
    // Assemble data
    fileList.forEach((file) = > {
      formData.append('files', file);
    });
    formData.append('id', galleryId);
    // Save image request interface
    reqwest({
      / / upload url
      url: 'url'.method: 'post'.// It must be false to avoid jQuery's default handling of formData
      processData: false.// The content-type must be false to automatically add the correct content-Type
      contentType: false.data: formData,
      success: (res) = > {
          message.success('Image uploaded successfully');
      },
      error: () = > {
          message.error('Uploading picture failed'); }});Copy the code

Back-end code:

    public Message insertPic(@RequestParam(value = "files", required = true) MultipartFile[] files) {
        // Check that the file array cannot be empty and has a length greater than 0
        if(files ! =null && files.length > 0) {
            // loop through the file array
            for (int i = 0; i < files.length; i++) { MultipartFile file = files[i]; }}}Copy the code

Analysis of the

F12 View the request header:

F12 Viewing input parameters:Because the interface is tunable, I always thought it was the back end that converted the data to NULL when processing it,

To solve

  1. After Baidu:

When defining file resolver MultipartResolver, did the resolveLazily property be set to true (the default is false)? The MultipartResolver automatically parses the request and empties the file stream by default when initBinder is used. As a result, the request in controller cannot obtain the file stream information. However, after following the relevant Settings on the Internet, it still does not work, still null.

  1. When I tested the interface with Postman, it worked. I realized that it probably wasn’t a problem on the back end, and took a closer look at the request headers and incoming parameters[object Object], interrupt point to view fileList:

FileLsit is not an array of File objects. OriginFileObj is a true File. Modify code:

 fileList.forEach((file) = > {
    formData.append('files', file.originFileObj, file.name);
 });
Copy the code
  1. As expected successful, finally tears flow full opposite ah ~ ~ ~, check the entry

conclusion

Take a close look at the ANTD documentation

  • A FileList is really an array of File objects

  • But a close reading of the FAQ reveals

The truth is out ~ ~ ~ I only blame myself for not reading the document carefully ~ ~ ~