小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?
文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器
本文主要结合vue的来讲解,主要知识点有“promise函数、formData对象使用、ajax异步上传、文件切割
//1、这里先在vue的Data中定义几个上传所需要的变量
taskId: '' //区分分包文件名
bytesPerPiece: 1 * 1024 * 1024, // 每个文件切片大小定为1MB .
totalPieces: 0,//文件切片个数
blob: '',//原始文件
start: 0,//第一个分片
end: 0,//最后一个分片
index: 1,//分片次序
filesize: 0,//文件大小
chunk: 0,//文件分片
formData: new FormData(),//后端header所需对象
// 2、分片上传方法--这里的ajax如果项目封装了axios可以直接改为axios,以避免使用jquery,使项目体积增大
fileSlice(){
return new Promise((resolve, reject) => {
var _this = this;
if (this.start < this.filesize) { //判断剩余文件大小,大于起始值执行切割操作
this.end = this.start + this.bytesPerPiece; //规定分片文件节点
if (this.end > this.filesize) { //判断是否是最后一个切片
this.end = this.filesize;
}
this.chunk = this.blob.slice(this.start, this.end); //切割文件
this.sliceIndex = this.index;
this.percentage = parseInt((this.sliceIndex / this.totalPieces) * 100); // 进度提示,如果不需要进度可省略
if(this.percentage == 0){ // 这里是因为当文件过大时候,避免进度显示过慢,影响用户体验
this.percentage = 1;
}
console.log('sliceIndex', this.sliceIndex, 'this.percentage', this.percentage);
this.formData = new FormData();
this.formData.append('file', this.chunk);
$.ajax({
type: 'post',
url: //后端接口
headers: { //后端所需参数
'jwt-token': Auth.getJwtToken(),
taskId: _this.taskId,
chunk: _this.sliceIndex,
size: _this.chunk.size,
chunkTotal: _this.totalPieces,
orginFileName: 'uploadFile'
},
//传入组装的参数
data: this.formData,
dataType: 'json',
async: true,
cache: false, //上传文件不需要缓存
contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
success: function(res) {
if (_this.sliceIndex == _this.totalPieces) { //判断是否为最后一个文件,如果是,赋值后端输出路径 像服务端上传文件
_this.upPath = res.data.path;
_this.buttonLoading = false;
}
if(res.code == 0){
resolve('0');
}else{
_this.clearUploadFile();
reject(res.message);
}
},
error: function(res) { //异常判断
reject('上传文件失败,请重新上传!', this.fileList = []);
_this.$message({
message: res.message,
type: 'error'
});
return 'break';
}
});
}
_this.start = this.end;
_this.index++;
});
},
async fileUpload(file) { //此处主要给文件加32位随机数
console.log(file.file);
this.blob = file.file;
this.filesize = this.blob.size;
this.totalPieces = Math.ceil(this.filesize / this.bytesPerPiece);
function randomWord(randomFlag, min, max) {
// eslint-disable-next-line one-var
let str = '',
range = min,
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd',
'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
'V', 'W', 'X', 'Y', 'Z'
];
// 随机产生
if (randomFlag) {
range = Math.round(Math.random() * (max - min)) + min;
}
for (var i = 0; i < range; i++) {
let pos = Math.round(Math.random() * (arr.length - 1));
str += arr[pos];
}
return str;
} this.taskId = randomWord(false, 32); for(let i = 0; i < this.totalPieces; i++){
let ttt = await this.fileSlice().catch((res) => {
this.$message({
message: res,
type: 'error'
});
});
if(ttt != 0){
break;
}
}
},
//3、中止文件上传
clearUploadFile(){
// buttonLoading
this.buttonLoading = false;
this.totalPieces = 0;
this.blob = '';
this.start = 0;
this.end = 0;
this.index = 1;
this.filesize = 0;
this.chunk = 0; this.percentage = 0;
// 清空文件表
this.fileList = [];
const mainImg = this.$refs.upload;
if (mainImg && mainImg.length) {
mainImg.forEach(item => {
// item.uploadFiles.length = 0;
item.clearFiles();
});
}
},
小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?的更多相关文章
- 小谢第10问:前端JS下载文件、表格
对于小型文件及表格下载,一般采用a标签形式 <buttonb @click="downloadTemplate()">模板下载</button> downl ...
- 小谢第6问:js中,filter函数是怎么使用的
数组的常用方法filter,今天在做数组筛选的时候用到需要将有重复的数组去除,因此用到这个函数,主要用到-- 选择需要的属性,最终留下想要的数组,如果刚开始的话可以看下下面代码 let nums = ...
- 小谢第23问: chorme的性能优化工具
问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...
- 小谢第37问:关于websocket推送进度,本地保存进度条,然后跳出页面进入后再显示的问题
1.主要技术点:sessionStorage 会话存储进度 这里在使用之前,顺便说一下cookie.sessionStorage.localStorage 共同点:都是保存在浏览器端,且同源的. 区别 ...
- 小谢第50问:vuex的五个属性-使用-介绍
一.Vuex 是什么? 官网:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 关键词:状态 ...
- 小谢第58问:nuxt搭建企业官网
最近公司要重构公司官网,jq+bootstrap 改为了vue,刚开始我以为用vue不是挺好的嘛,后来才发现,有于vue单页面的特性,不利于搜索引擎的抓取,因此在seo方面需要另外想办法,于是乎,就找 ...
- 小谢第8问:ui框架的css样式如何更改
目前有三种方法, 1.使用scss,增加样式覆盖,但是此种方法要求css的className需要与框架内的元素相一致,因此修改时候需要特别注意,一个父级的不同就可能修改失败 2.deep穿透,这种方法 ...
- 小谢第2问:后端返回为数组list时候,怎么实现转为tree
要求后端返回给我的list时候,在数组中定义有id , parentid, 可以用双重循环的方法,得到tree需要的数据结构,这样得到的数据就可以直接复制给树组件的data啦const oldData ...
- 小谢第1问:为什么要写blog
一直犹豫了好久,终于在csdn上弄好了自己的博客账号,感谢平台,以后在工作的过程中,遇到不懂得问题,解决后,会在这里记录下自己所遇到的问题
随机推荐
- Exception in thread "main" java.lang.NoSuchMethodError: scala.Predef$.wrapRefArray([Ljava/lang/Object;)Lscala/collection/mutable/WrappedArray
我是在用akka框架做简单的一个聊天,然而出师不利,刚开始学就遇到这个问题 遇事不决问百度,百度给出的结果是spark中scala版本和你使用的scala的版本不一致,所导致的错误 我用的是akka, ...
- JPA与hibernate-------JPA
ORM概述 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数据库 ...
- 第十一章:Python高级编程-协程和异步IO
第十一章:Python高级编程-协程和异步IO Python3高级核心技术97讲 笔记 目录 第十一章:Python高级编程-协程和异步IO 11.1 并发.并行.同步.异步.阻塞.非阻塞 11.2 ...
- Day_09【常用API】扩展案例4_将字符串变为字符数组,并将大写字母改为小写,首尾内容不同互换,并将索引为偶数的元素替换
分析以下需求,并用代码实现 1.键盘录入一个字符串 2.将该字符串变成字符数组(不能使用toCharArray()方法) 3.将字符数组中的所有大写字母变成小写字母(不能使用toLowerCase() ...
- 【FreeRTOS学习06】深度解剖中断与任务之间同步的具体使用场景
嵌入式系统中中断是必不可少的一部分: [FreeRTOS实战汇总]小白博主的RTOS学习实战快速进阶之路(持续更新) 文章目录 1 前言 2 中断特点 3 延迟中断处理 3.1 信号量的使用 3.2 ...
- ApplicationInsights迁移国内躺的坑
由于之前有段时间访问国际版的Application Insights实在是慢,而且又不是每个人都有梯子,然后国内版大概在去年(2019)六七月左右已经上线,想着也有一段时日了,要么就迁了吧. 然后实际 ...
- JavaWeb实战:报价计算系统(layui+tomcat+cookie实现)
JavaWeb实战:报价计算系统(layui+tomcat+cookie实现) 系统概述: 该系统是文物物流公司的一个小功能模块,用于帮助用户计算运费.点击查看实际效果 系统文档: 添加展品: 在表单 ...
- 接口测试/soapUI
忙过了2019年的下半年终于在2020年快上线了,~鞭炮噼啪过~ 项目技术架构:XML请求数据 -> JAVA (转换)-> JOSN请求数据 项目使用工具:soapUI/Jmeter,m ...
- tomcat 8.5 及其 9.0 response写cookie 设置damain为 [.test.com] 出错 An invalid domain [.test.com] was specified for this cookie
抛出异常: java.lang.IllegalArgumentException: An invalid domain [.test.com] was specified for this cooki ...
- 我的linux学习日记day1
红帽考试 1.RHCSA ------>RHCE 210/300分 2015 RHEL7 2020 RHCE8 8月1改每个月25号 所以我如果想要在6月份考试,就要在 5月25前预约一个考场可 ...