ReactJS將base64中的多個圖像上傳到數組中

Question

我想創建一個基於base64的image上傳器，我想將結果作為一個array得到，但我得到了empty! 數組，我知道這可能是一個asynchronous問題，但我不知道如何使用異步，在map async, await任何想法？

const [array, setArray] = useState([]);

const fileBase64 = (img) => {
    let result = [...img];

    setUrlImage(img);

    result && result.map(function (img){
        let fileReader = new FileReader();
        fileReader.readAsDataURL(img);
        fileReader.onloadend = async () => {
            let res = await fileReader.result;
            setArray([...array, res])
        };
    })
    console.log(array)
}

const handleImage = (e) => {
    let image = [...e.target.files];
    fileBase64(image);
}

<input type="file" multiple={true} onChange={handleImage}/>

Answer 1

由於這種asynchronous<\/code>性質，狀態被設置，即在數據urls<\/code>設置為數組之前push<\/code> 。

這就是您的array<\/code>返回空的原因。

要修復它，您可以使用 create Promise<\/code>在每個文件的加載事件后得到解決。 並使用Promise.all<\/code> ，它將在每個 Promise 解決后解決，然后使用setArray<\/code> ：

fileBase64  = (img) => {
  return new Promise((resolve, reject) => {
    let fileReader = new FileReader();
    fileReader.onerror = reject
    fileReader.onload = function () {
      resolve(fileReader.result)
    }
    fileReader.readAsDataURL(img)
  })
}

handleImage = (e) => {
  let image = e.target.files;
  Promise.all(Array.from(image).map(this.readAsDataURL))
    .then((urls) => {
      setArray(urls)
    })
    .catch((error) => {
      console.error(error)
    })
}

Answer 2

此示例在 React 中，但您可以輕松地將其修改為標准 javascript。

如果它是標准 javascript，只需更改const [images, setImages] = useState([]); 進入let images = [] 。

 const [images, setImages] = useState([]); const formatImage = async() => { try { for (let i = 0; i < e.target.files.length; i++) { const reader = new FileReader(); reader.readAsDataURL(e.target.files[i]); reader.onload = (readerEvent) => { images.push(readerEvent.target ? .result); }; } } catch (error) { console.log(error); } };

 <input type="file" multiple onChange={formatImage} />

這是將這些圖像放在 Firebase Firestore 上的示例，如果它是標准的 javascript，則將setImages([])更改為images = []

 const addImage = async() => { try { Promise.all( images.map( async(file: any) => await addDoc(collection(db, "images"), { image: file, date: Timestamp.now(), }) ) ); setImages([]); } catch (error) { console.log(error); } };