20190603

最新推荐文章于 2021-12-03 15:44:36 发布

chuanpizhe9926

最新推荐文章于 2021-12-03 15:44:36 发布

阅读量224

点赞数

原文链接：https://my.oschina.net/u/4085373/blog/3058087

版权

本文探讨了使用XMLHttpRequest进行文件上传下载时如何监听进度，包括通过XHRHttprqeuest的progress属性实现文件上传下载的加载效果。同时，介绍了如何处理文件流并展示了一个StreamDownload类的实例。此外，还讨论了contextmenu事件的触发机制及其在不同场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 文件下载上传loading

通过XHRHttprqeuest新增的progress属性，文件上传是XHRHttprqeuest.upload.onprogress，文件下载是XHRHttprqeuest.progress属性

http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

//文件progress下载
const filepath = res.data.data.data;
var req = new XMLHttpRequest();
req.open("GET", `${original}${filepath}`, true);
//监听进度事件
req.addEventListener("progress", function (evt) {
  if (evt.lengthComputable) {
    var percentComplete = evt.loaded / evt.total;
    var percentage = Math.round(percentComplete * 100);
    var pobj = document.getElementById('progressing');
    // console.log(percentComplete);
    pobj.innerText =  percentage + "%";
    pobj.parentElement.style.width = percentage + 'px';
  }
}, false);
// req.responseType = "blob";
req.onreadystatechange = function () {
  if (req.readyState === 4 && req.status === 200) {}
};
req.send();

通过读取文件流的形式，

class StreamDownload {
    constructor (downloadCallback = null) {
        this.downloadCallback = downloadCallback;
        this.percentage = 0;
        this.start = new Date().valueOf();
    }
    setProgress (received, total) {
        this.percentage = Math.round((received * 100) / total);
        console.log('receivedBytes:　' +this.percentage)
        this.downloadCallback('progress', this.percentage);
    }
    downloadFile (patchUrl, baseDir, callback) {
        this.downloadCallback = callback; // 注册回调函数
        const downloadFile = 'download.zip'; // 下载文件名称，也可以从外部传进来
        let receivedBytes = 0;
        let total = 0;
        const req = request({
            method: 'GET',
            uri: patchUrl
        });
        const out = fs.createWriteStream(path.join(baseDir, downloadFile));
        req.pipe(out);
        req.on('response', (data) => {
            total = parseInt(data.headers['content-length'], 10); //总文件字节大小
        });
        req.on('data', (chunk) => {
            // 更新下载的文件块字节大小
            receivedBytes += chunk.length;
            const current = new Date().valueOf();
            if (current - this.start > 1000) {
                this.setProgress(receivedBytes, total);
                this.start = current;
            }
        });
        req.on('end', () => {
            console.log('下载已完成，等待处理');
            this.percentage = 100;
            this.downloadCallback('finished', this.percentage);
        });
    }
}

2. You cannot pipe after data has been emitted from the response

3. Element: contextmenu event

The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key. In the latter case, the context menu is displayed at the bottom left of the focused element, unless the element is a tree, in which case the context menu is displayed at the bottom left of the current row.

当用户试图打开一个context menu的时候， contextmenu事件会被触发。比较典型的案例是当你鼠标右击的时候触发的contextmenu事件，或者是当你按住context menu key的时候。context menu默认显示在触发元素的左下方，除非这个元素是个树

<p id="noContextMenu">The context menu has been disabled on this paragraph.</p>

noContext = document.getElementById('noContextMenu');
// 在P元素上右击的时候，默认的右击事件不会被触发
noContext.addEventListener('contextmenu', e => {
  e.preventDefault();
});

转载于:https://my.oschina.net/u/4085373/blog/3058087