js怎样删除服务器文件夹,小谢第7问:js纯前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?...

//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 = newFormData();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);functionrandomWord(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];

}returnstr;

}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;

}

}

},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值