एक संभावित समाधान, new Request() निर्माता का उपयोग किया जाएगा तो जाँच Request.bodyUsedBoolean विशेषता
bodyUsed विशेषता के गेटर अगर disturbed सच लौटना चाहिए, और झूठी अन्यथा।
निर्धारित करने के लिए करता है, तो धारा distributed
है Body mixin को लागू करने वाली वस्तु होने की disturbed अगर body में गैर-शून्य है और इसके streamdisturbed है कहा जाता है।
वापसी fetch()Promise.then() के भीतर से एक ReadableStream की .read() कॉल पुनरावर्ती जब Request.bodyUsedtrue के बराबर है श्रृंखलित।
नोट, दृष्टिकोण Request.body के बाइट्स को नहीं पढ़ता है क्योंकि बाइट्स एंडपॉइंट पर स्ट्रीम किए जाते हैं। साथ ही, ब्राउज़र पर पूरी तरह से प्रतिक्रिया लौटने से पहले अपलोड पूरी तरह से पूरा हो सकता है।
const [input, progress, label] = [
document.querySelector("input")
, document.querySelector("progress")
, document.querySelector("label")
];
const url = "/path/to/server/";
input.onmousedown =() => {
label.innerHTML = "";
progress.value = "0"
};
input.onchange = (event) => {
const file = event.target.files[0];
const filename = file.name;
progress.max = file.size;
const request = new Request(url, {
method: "POST",
body: file,
cache: "no-store"
});
const upload = settings => fetch(settings);
const uploadProgress = new ReadableStream({
start(controller) {
console.log("starting upload, request.bodyUsed:", request.bodyUsed);
controller.enqueue(request.bodyUsed);
},
pull(controller) {
if (request.bodyUsed) {
controller.close();
}
controller.enqueue(request.bodyUsed);
console.log("pull, request.bodyUsed:", request.bodyUsed);
},
cancel(reason) {
console.log(reason);
}
});
const [fileUpload, reader] = [
upload(request)
.catch(e => {
reader.cancel();
throw e
})
, uploadProgress.getReader()
];
const processUploadRequest = ({value, done}) => {
if (value || done) {
console.log("upload complete, request.bodyUsed:", request.bodyUsed);
// set `progress.value` to `progress.max` here
// if not awaiting server response
// progress.value = progress.max;
return reader.closed.then(() => fileUpload);
}
console.log("upload progress:", value);
progress.value = +progress.value + 1;
return reader.read().then(result => processUploadRequest(result));
};
reader.read().then(({value, done}) => processUploadRequest({value,done}))
.then(response => response.text())
.then(text => {
console.log("response:", text);
progress.value = progress.max;
input.value = "";
})
.catch(err => console.log("upload error:", err));
}
@Magix [लाए जाने छोड़ रहा: अगली पीढ़ी # 447] देखें। (Https: // GitHub।com/whatwg/fetch/issues/447) – guest271314