Question

几天来，我一直坚持在ReactJS中上传多个文件！我之前上传了一个文件，如下面的代码所示。我使用sessionStorage可以查看文件binaryString。

<input
type="file"
onChange={(evt) => {

    let files = evt.target.files;
    let file = files[0];

    if (files && file) {
        let reader = new FileReader();
        reader.onload = function (readerEvt) {
            let binaryString = readerEvt.target.result;
            const image = btoa(binaryString);
            const formattedImage = 'data:image/octet-stream;base64,' + image;
            isLoad = true
            sessionStorage.setItem('load', JSON.stringify(isLoad))
            SingleImageBase64Model.setSingleImageBase64(formattedImage);
        }
        reader.readAsBinaryString(file);


        if (JSON.parse(sessionStorage.getItem('load')) === true) {
            this.setState({ isImageLoaded: true });
        } else {
            this.setState({ isImageLoaded: false });
        }
    }
}} />

今天，我很想上传多个文件。数据将发送到用Java编写的Restful Web服务（spring-boot）。目前，我在ReactJS中拥有以下内容，并且一直为上传多个文件而苦恼。

// In return method, HTML for file-picker
<input
type='file'
multiple
onChange={this.onFileChange} />

// Function for handling file/s uploads
onFileChange = (event) => {
const fileData = event.target.files;
const blob = new Blob([fileData]);
const reader = new FileReader();

reader.onloadend = () => {
    for (let i = 0; i < fileData.length; i++) {

        console.log('Data to be sent', {
            name: fileData[i].name,
            fileSize: fileData[i].size,
            fileContentType: fileData[i].type,
            file: reader.result
        });
    }
}
reader.readAsDataURL(blob); }

我的问题是 reader.result ，它返回与控制台日志中所示相同的binaryString数据。

以上代码，如果文件上传有效！将会进行相应的格式化，以接受我的后端请求（Web服务）以保存多个文件。

后端模型如下。

@Entity
public class Document implements Serializable {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@NotNull
private String name;
private String description;
@Lob
private byte[] file;
private int fileSize;
private String fileContentType;

// constructors
// getter and setters

}

有人可以在上传多个文件的问题上为我提供帮助。预先感谢...

Answer 1

我认为为此您需要使用 for 循环。就我而言，我已经使用过。

<input
  type='file'
  multiple
  onChange={this.onFileChange} />

onFileChange = () => {

  let filesArray = e.target.files;
  let array = [];

  for (var i=0; i<filesArray.length; i++) 
  {
      let fileObj = {
         name: filesArray[i].name,
         fileSize: filesArray[i].size,
         fileContentType: filesArray[i].type,
         file: filesArray[i].result
      }
      array.push(filesArray[i]);
      reader.readAsText(filesArray);
  }

  this.setState({ uploadedFiles: array })

希望对你有帮助。我为此使用了 for 循环。

在ReactJS中上传多个文件

1 个答案: