共计 1941 个字符，预计需要花费 5 分钟才能阅读完成。
分片及七牛云上传封装项目里面用到七牛云，有分片和简单上传
在此做下简单的记录，分享
下面是分片上传封装
process.env.MAX_FILESIZE 是我写在 config 里面分片的大小 如 1024102410 10MB 分片
项目是 vue 框架，请求是 axios。
上传的进度在 onUploadProgress 中获取
/**
* 封装 upload 方法
* @param url 上传路径
* @param json 包含 file 对象
* @returns {Promise}
*/
export function upload(url,json) {
return new Promise((resolve,reject) => {
let size = parseInt(Number(json.file.size)/Number(process.env.MAX_FILESIZE) +1);
let y = 0;
let fun = function(){
let formData = new FormData();
let file = json.file.slice(y*process.env.MAX_FILESIZE,(y+1)*process.env.MAX_FILESIZE);
formData.append(‘chunk’, y);
formData.append(‘file_name’, json.file.name);
formData.append(‘count’, size);
formData.append(‘type’, json.type);
formData.append(‘file’, file);
axios.post(url,formData,{ headers: {
‘Content-Type’: ‘multipart/form-data’
},timeout:10000000,
onUploadProgress: progressEvent => {
//progressEvent.loaded 为上传进度
},
}).then(response => {
if(response.data.code === 200){
if(y+1<size){
y++;
fun()
}else{
y=0;
resolve(response.data.data);
}
}else{
Vue.prototype.$message.error(response.data.msg)
}
})
.catch(err => {
reject(err);
let message = ‘ 请求失败！请检查网络 ’;
if(err.response)message=err.response.data.message;
Vue.prototype.$$msgbox({
title:’ 错误！’,
message:message,
type:’error’,
})
})
};
fun()
}
})
}
下面是七牛云上传的封装
/**
* 封装 upload 方法
* @param json json 中包含 fail
* @returns {Promise}
*/
export function uploadQiniu(json) {
return new Promise((resolve,reject) => {
axios.get(‘ 获取七牛权限的后台接口地址，主要获取七牛 token’,{
params:{
file_name:json.file.name
}
}).then(resData =>{
let putExtra = {
fname: json.file.name,
mimeType:json.mimeType || null
};
let congif = {};
let observable = qiniu.upload(json.file,resData .data.data.new_name,resData .data.data.token,putExtra,congif);
let observer = {
next(res){
let progress = Number(res.total.percent.toFixed(0));
// 此处得到上传进度百分比 可加后续操作
},
error(err){
reject(err);
let message = ‘ 请求失败！请检查网络 ’;
if(err.response)message=err.response.data.message;
Vue.prototype.$alert({
title:’ 错误！’,
message:message,
type:’error’,
})
},
complete(res){
res.url = res.key;
res.name = json.file.name;
resolve(res);
}
};
let subscription = observable.subscribe(observer)
}
);
})
}
