Babel.js ReactJS将多个base64图像上传到数组中

qv7cva1a 于 2022-12-08 发布在 Babel

关注(0)|答案(1)|浏览(167)

我想创建一个基于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}/>

babeljs

来源：https://stackoverflow.com/questions/71001599/reactjs-upload-multiple-image-in-base64-into-an-array

1条答案

按热度按时间

bfnvny8b1#

由于该asynchronous性质，在阵列中设置数据urls之前，设置状态，即push。
这就是array返回空的原因。
若要修正此问题，您可以使用create 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)
    })
}

赞(0）回复(0）举报 2022-12-08

我来回答

Babel.js ReactJS将多个base64图像上传到数组中

1条答案

相关问题

热门标签

最新问答