基于js管理大文件上传以及断点续传，程序员翻身之路

headers: {

‘Content-Type’: ‘application/x-www-form-urlencoded’

}

});

if (+data.code === 0) {

alert(恭喜您，文件上传成功，您可以基于 ${data.servicePath} 地址去访问~~);

return;

}

throw data.codeText;

} catch (err) {

alert(‘很遗憾，文件上传失败，请您稍后再试~~’);

} finally {

upload_button_select.classList.remove(‘loading’);

}

});

复制代码

上面这个例子中后端收到前端传过来的文件会对它进行生成一个随机的名字，存下来，但是有些公司会将这一步放在前端进行，生成名字后一起发给后端，接下来我们来实现这个功能

前端生成文件名传给后端

这里就需要用到上面提到的插件SparkMD5[1],具体怎么用就不做赘述了，请参考文档

• 封装读取文件流的方法

const changeBuffer = file => {

return new Promise(resolve => {

let fileReader = new FileReader();

fileReader.readAsArrayBuffer(file);

fileReader.onload = ev => {

let buffer = ev.target.result,

spark = new SparkMD5.ArrayBuffer(),

HASH,

suffix;

spark.append(buffer);

// 得到文件名

HASH = spark.end();

// 获取后缀名

suffix = /.([a-zA-Z0-9]+)$/.exec(file.name)[1];

resolve({

buffer,

HASH,

suffix,

filename: ${HASH}.${suffix}

});

};

});

};

复制代码

• 上传服务器相关代码

upload_button_upload.addEventListener(‘click’, async function () {

if (checkIsDisable(this)) return;

if (!_file) {

alert(‘请您先选择要上传的文件~~’);

return;

}

changeDisable(true);

// 生成文件的HASH名字

let {

filename

} = await changeBuffer(_file);

let formData = new FormData();

formData.append(‘file’, _file);

formData.append(‘filename’, filename);

instance.post(‘/upload_single_name’, formData).then(data => {

if (+data.code === 0) {

alert(文件已经上传成功~~,您可以基于 ${data.servicePath} 访问这个资源~~);

return;

}

return Promise.reject(data.codeText);

}).catch(reason => {

alert(‘文件上传失败，请您稍后再试~~’);

}).finally(() => {

changeDisable(false);

upload_abbre.style.display = ‘none’;

upload_abbre_img.src = ‘’;

_file = null;

});

});

复制代码

上传进度管控

---

这个功能相对来说比较简单，文中用到的请求库是axios,进度管控主要基