एक संभावित समाधान new Request()निर्माणकर्ता का उपयोग करना तब Request.bodyUsed Booleanविशेषता की जांच करना होगा
bodyUsedविशेषता के गेटर अगर सच लौटना चाहिए disturbedअन्यथा, और झूठे।
यह निर्धारित करने के लिए कि क्या धारा है distributed
Bodyमिक्सिन को लागू करने वाली एक वस्तु को कहा जाता है कि disturbedयदि
bodyवह अशक्त है और उसकी streamहै disturbed।
जंजीर के fetch() Promiseभीतर से लौटें जब एक के .then()पुनरावर्ती .read()कॉल करने के लिए बराबर है ।ReadableStreamRequest.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));
}