ReactJS 将 base64 中的多个图像上传到一个数组中

Question

我想创建一个基于 base64 的 image uplaoder，我想得到一个 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 性质，正在设置状态，即 push 在数据 urls 设置到数组之前。

这就是你的 array return 为空的原因。

要修复它，您可以使用创建 Promise，它在每个文件的加载事件后得到解决。并使用 Promise.all ，它将在每个 Promise 解决后解决，然后使用 setArray:

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)
    })
}

ReactJS 将 base64 中的多个图像上传到一个数组中

ReactJS upload multiple image in base64 into an array

javascript

reactjs

typescript

ecmascript-6

babeljs