Open xgqfrms opened 6 years ago
https://github.com/github/fetch/issues/89
https://stackoverflow.com/questions/35711724/upload-progress-indicators-for-fetch https://stackoverflow.com/questions/36453950/upload-file-with-fetch-api-in-javascript-and-show-progress
https://developer.mozilla.org/zh-CN/docs/Web/API/Response/status https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
function consume(stream, total = 0) {
while (stream.state === "readable") {
var data = stream.read();
total += data.byteLength;
console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).");
}
if (stream.state === "waiting") {
stream.ready.then(() => consume(stream, total));
}
return stream.closed;
}
fetch("https://cdn.xgqfrms.xyz/json/data.json")
.then(res => consume(res.body))
.then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
.catch((e) => console.error("something went wrong", e));
Progress Indicator Examples
https://fetch-progress.anthum.com/ https://github.com/AnthumChris/fetch-progress-indicators
https://github.com/axios/axios https://github.com/axios/axios#request-config
{
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` allows handling of progress events for downloads
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
}
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description Fetch & Streams API & Progress Indicator Examples
* @link https://github.com/xyz-data/fetch-progress-indicators
* @augments
* @example fetchProgress();
*
*/
const fetchProgress = (url = `https://cdn.xgqfrms.xyz/json/data.json`, debug = false) => {
const streamConsume = (stream, total = 0) => {
while (stream.state === "readable") {
let data = stream.read();
total += data.byteLength;
console.log(`received ${data.byteLength} bytes; (${total} bytes in total).`);
}
if (stream.state === "waiting") {
stream.ready.then(() => consume(stream, total));
}
return stream.closed;
};
fetch(url)
.then(res => streamConsume(res.body))
.then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
.catch((e) => console.error("something went wrong", e));
};
export default fetchProgress;
export {
fetchProgress,
};
基于 javascript 和 css 开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费
http://www.wangeditor.com/index.html https://github.com/wangfupeng1988/wangEditor/
https://www.kancloud.cn/wangfupeng/wangeditor3/335769
$ npm i -S wangeditor
var E = window.wangEditor;
var editor = new E('#div1');
editor.create();
https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-react/src/App.js
// React refs
https://github.com/wangfupeng1988/wangEditor/issues/1746
$ npm audit
$ npm audit fix
中文乱码 & UTF-8
https://www.raymondcamden.com/2016/05/10/uploading-multiple-files-at-once-with-fetch/
function processForm(e) {
e.preventDefault();
var formData = new FormData();
if($f1.val()) {
var fileList = $f1.get(0).files;
for(var x=0;x<fileList.length;x++) {
formData.append('file'+x, fileList.item(x));
}
}
fetch('http://localhost:3000/upload', {
method:'POST',
body:formData
}).then(function(res) {
console.log('Status', res);
}).catch(function(e) {
console.log('Error',e);
});
}
download progress & js
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress
https://stackoverflow.com/questions/18126406/how-can-i-get-the-progress-of-a-downloading-script https://stackoverflow.com/questions/16690740/how-to-show-loading-status-in-percentage-for-ajax-response https://stackoverflow.com/questions/18323152/get-download-progress-in-node-js-with-request
https://www.w3schools.com/howto/howto_js_progressbar.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3
https://ourcodeworld.com/articles/read/56/how-to-get-the-progress-of-an-upload-or-download-with-jquery-ajax https://zinoui.com/blog/ajax-request-progress-bar https://coderwall.com/p/je3uww/get-progress-of-an-ajax-request