如何向文件數組中的對象添加值？

Question

我正在嘗試將鍵值對添加到文件數組中。 我知道這個問題已經在其他文章中詳細介紹過，例如這里。 但是，所使用的方法在我的上下文中不起作用。 如果我遺漏了什么或有另一個明顯的缺陷，請道歉！

我在一個數組中有一張或多張圖片，並希望將信息添加到每個文件中，無論圖片是否為標題圖像。 即我想實現這樣的事情：

  [0:  {File: {name: "Test", 
             lastModified: "125344", 
             etc: "something"}, 
       isTitlePicture: null}
   1:  {File: {name: "Test",
              lastModified: "125344",
              etc: "something"}, 
       isTitlePicture: null}]

使用我當前的代碼，我得到如下所示的數組。 這意味着有關標題圖像的信息在文件信息中。 這是我試圖避免的。

  [0: File: {name: "Test", 
             lastModified: "125344", 
             etc: "someting",
             isTitlePicture: {isTitlePicture: null}}
   1:  File: {name: "Test", 
             lastModified: "125344", 
             etc: "someting",
             isTitlePicture: {isTitlePicture: null}]

import React, { Component } from "react";
import { MDBRow, MDBCol, MDBCardBody, MDBCard, MDBCardImage } from "mdbreact";


export class ImageUploadView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      files: [],
      images: []
    };
  }


  onChangeImage(e) {
    const files = Array.from(e.target.files);

    var obj = { isTitlePicture: null };
      
    files.forEach(item => item.isTitlePicture = {...obj}); 

    const images = files.map((file) => URL.createObjectURL(file));
    this.setState({
      files: [...this.state.files, ...files],
      images: [...this.state.images, ...images]
    });
  }

  render() {
    
    return (
      <React.Fragment>
        <div className="card card-body mt-4 mb-4">
          <h1>Add Image</h1>
          <div>
            <input
              type="file"
              onChange={(e) => this.onChangeImage(e)}
              multiple
              //accept=".jpg,.png"
            />
          </div>
          <div className="Images">
            {this.state.images.map((image, i) => (
              <MDBRow
                key={image}
                style={{ margin: "10px", display: "inline-block" }}
              >
                <MDBCol>
                  <MDBCard style={{ width: "5rem" }}>
                    <MDBCardImage
                      className="img-fluid"
                      src={image}
                      waves
                    />
                    <MDBCardBody>       
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
              </MDBRow>
            ))}
          </div>
        </div>
      </React.Fragment>
    );
  }
}
  }

基本上我想讓 isTitlePicture 與 File 處於同一“級別”，而不是在 File 中。

Answer 1

您可以像這樣簡化代碼：

  onChangeImage(e) {
    // Use spread operator like you do everywhere else.
    const files = [...e.target.files].map(file => ({
      isTitlePicture: null,
      file // same as file: file,
    }));
  
    const images = files.map(
      ({file}) => URL.createObjectURL(file)
    );
    
    // When dealing with previous state, the best practice is to pass a
    // function to setState that'll give you access to your mmm... prev state
    // Read below...
    this.setState(prevState => ({
      files: [...prevState.files, ...files],
      images: [...prevState.images, ...images],
    }));
  }

上面的代碼將使您的狀態看起來像：

  "files": [
    {
      "isTitlePicture": null,
      "file": {File Object}
    },
    {
      "isTitlePicture": null,
      "file": {File Object}
    }
  ],

  "images": [
    "blob:https://...",
    "blob:https://..."
  ]
}

setState是異步的，這就是為什么在處理舊狀態時最好傳遞一個函數： https : //reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

此外，請確保在完成URL.revokeObjectURL(file)調用URL.revokeObjectURL(file) 。 在您手動執行之前，瀏覽器不會釋放對您的文件的引用，這可能會導致單頁應用程序中的內存泄漏。

我沒有足夠的上下文，但看起來您可以將文件 URL 作為files數組的一部分：

    const files = [...e.target.files].map(file => ({
      isTitlePicture: null,
      file,
      url: URL.createObjectURL(file),
    }));

祝你好運！

勝利者

Answer 2

我認為你的對象結構是錯誤的。

onChangeImage(e) {
    const files = Array.from(e.target.files);

    var result = [];
    files.forEach(item => result.push({file:item,isTitlePicture: null}));

    const images = result.map((file) => URL.createObjectURL(file));
    this.setState({
      files: [...this.state.files, ...result],
      images: [...this.state.images, ...images]
    });
  }