第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

反應(yīng).js。當(dāng)我嘗試使用 FileReader 上傳超過 3 個(gè)圖像文件時(shí),只上傳了 3 個(gè)

反應(yīng).js。當(dāng)我嘗試使用 FileReader 上傳超過 3 個(gè)圖像文件時(shí),只上傳了 3 個(gè)

拉莫斯之舞 2023-06-09 15:52:21
下一個(gè)函數(shù)是獲取文件并將其設(shè)置為狀態(tài) obj (arr: [readerEvent.target.result])。上傳一個(gè)文件時(shí)工作正常,上傳 2 和 3 時(shí)正常。當(dāng)我嘗試上傳超過 3 個(gè)文件時(shí) - 只上傳了 3 個(gè)。 我可以看到完整的 (5) 個(gè)文件列表正在通過使用 console.log 進(jìn)入 func。input:    <Input      onChange={handleChange}      type="file"      // accept="image/png, image/jpeg"      multiple    />----------------------------------------Component:    const list = Object.keys(e.target.files).map((elm) => e.target.files[elm]);    list.map((file, index) => {          loadFile(file, index, setImagesList);    });---------------------------------------------------------------------------------------Util:export default function loadFile(file, index, setImagesList) {  //   console.log("another file ", file);  let image = new Image();  var reader = new FileReader();  reader.onloadend = function (readerEvent) {    image.src = readerEvent.target.result;    image.onload = function () {      setImagesList((old) => [        ...old,        {          key: `${Date.now()}-${file.name}-${index}`,          arr: [readerEvent.target.result],          imageOriginalWidth: image.width,          imageOriginalHeight: image.height,        },      ]);    };  };  reader.onerror = function (event) {    console.error("File could not be read! Code " + event.target.error.code);  };  reader.readAsDataURL(file);}
查看完整描述

1 回答

?
蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊

確定找到了解決方案,所以我會(huì)分享它。將整個(gè)列表發(fā)送到 util 函數(shù)并在那里進(jìn)行處理。在 util func 中,我將更新一個(gè)狀態(tài),該狀態(tài)將是可選的加載文件。只有在檢查之后,我才會(huì)在組件內(nèi)部設(shè)置“真實(shí)”圖像列表——這將在 util 之外發(fā)生:


 useEffect(()=>{

   uploaded.map((obj, index) => {

      if (isValid) {

        setImagesList((old) => [...old, obj]);

      }

},[uploaded])

-----------------------------------

util :

export default function loadFiles(files, setUploaded) {

  const reader = new FileReader();

  let arr = [];

  function readFile(index) {

    if (index >= files.length || index > 5) {

      setUploaded(arr);

      return;

    }

    const file = files[index];

    reader.onload = function (e) {

      let image = new Image();

      image.src = e.target.result;

      image.onload = function () {

        arr.push({

          key: `${Date.now()}-${file.name}-${index}`,

          name: file.name,

          arr: [e.target.result],

          imageOriginalWidth: image?.width,

          imageOriginalHeight: image?.height,

        });

        readFile(index + 1);

      };

    };

    reader.readAsDataURL(file);

  }

  readFile(0);

}


查看完整回答
反對 回復(fù) 2023-06-09
  • 1 回答
  • 0 關(guān)注
  • 176 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號