ただいま、ajaxで取得した画像データをローカルにダウンロードしようとしているのですが、20個中4個くらいの画像しかダウンロードされません。
1個ずつurlをダウンロードすると全て上手くいきます。
eachの回転が早すぎて ajax通信が間に合っていないのでしょうか?
この場合どのようにすればいいのかわからず途方にくれています。 何かいいアドヴァイスがある方がいましたら教えていただけないでしょうか?
async function downloadFile(imageUrl) { var xhr = new XMLHttpRequest(); xhr.open('GET', imageUrl, true); xhr.responseType = 'arraybuffer'; xhr.onload = await function(e) { // ArrayBufferで返ってくる var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response))); var link = document.createElement('a'); link.href = `data:image/jpeg;base64,${base64String}`; link.download = imageUrl; link.click(); console.log("ファイルをダウンロードしました。"); }; xhr.send(); } //非同期通信のためのeach async function asyncForEach(array, callback) { for (let index = 0; index < array.length; index++) { await callback(array[index], index, array); } } // 20個くらいの要素をとってくる var imageUrls = $(".upload_data"); asyncForEach(imageUrls, async ele => { //画像urlを取得する var element = ele.getAttribute("data-upload"); var hashedEle = JSON.parse(element); var imageUrl = hashedEle["page_url"]; // 画像をダウンロード await downloadFile(imageUrl); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/01 12:33