分片及七牛云上传封装

不念不忘少年蓝@ 2022-01-09 10:23 544阅读 0赞

项目里面用到七牛云，有分片和简单上传

在此做下简单的记录，分享

下面是分片上传封装

process.env.MAX\_FILESIZE 是我写在config里面分片的大小 如1024\*1024\*10 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);
    　　　　　　//只有最后一次上传以后才会抛出then } 
    　　　　　　}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)
            }
          );
        })
    }

转载于:https://www.cnblogs.com/wangwBlogs/p/10472077.html