前端小测试---- 图片上传

得分

8分我自己得了4分

第一问

xhr.onprogress和xhr.upload.onprogress的区别：这两个都能显示进度百分比，但是，前者显示的是服务器返回的数据，后者是发送给服务器的。例如，我们ajax get一张图片，则前者合适；如果我们是ajax post上传一张图片，则后者合适。

    var xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        console.log(`上传进度为: ${event.loaded} of ${event.total} bytes`);
      }
    };
    xhr.onload = function () {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log('成功 ' + xhr.responseText);
      } else {
        console.warn('失败 ' + xhr.status);
      }
    };
    xhr.onerror = function () { };
    xhr.open('POST', '/upload', true);
    xhr.send(file);

第二问

event.target.files是一个选择文件对象类数组，适合使用filter迭代进行过滤，然后文件大小直接file.size就有，file.name是文件名

    const finalFiles = [];
    const fileMaxSize = 1024 * 1024;
    Array.from(files).forEach(
      file => file.size < fileMaxSize && finalFiles.push(file)
    );

第三问

使用Promise.all()

const promise = function(file){
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        var target = xhr.upload;
        target.onloadend = function(){
            //console.log('complete');
            resolve();
        }
        target.onerror = function(){
            //fail
            reject();
        }
        xhr.open("POST",'/upload',true);
        xhr.send(file);
    });
}

const promises = [...files].map(function(file){
    return promise(file);
})

Promise.all(promises).then(function(values) {
    //console.log('all complete');
});

这个方法其实是有问题的，当有一项有问题的时候是会被中断的，可以使用

• Promise.allSettled() 这个比较新的特性
• 传统的计数器实现，每完成一个loadend，则计数变化一位，直到和files.length匹配