七牛云上传及上传方法封装

Muninn 发布于2019-08-26 13:33 / 3741人阅读

摘要：分片及七牛云上传封装项目里面用到七牛云，有分片和简单上传在此做下简单的记录，分享下面是分片上传封装是我写在里面分片的大小如分片项目是框架，请求是。

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

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

下面是分片上传封装

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

}

GPU云服务器云服务器七牛云存储图片上传上传及显示图片php 七牛上传策略七牛上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109021.html

记录一下前端分片上传七牛云踩过的坑

摘要：后来查阅了资料后自己手动实现了文件切片上传到服务器基本需求已经实现，但由于效率及稳定性问题后来决定还是直传文件到七牛云。总结起来七牛云上传的套路就是后台为你提供或者获取的接口地址之后上传的时候要带上这个。起因最近在工作中有个上传大文件的需求，原先咨询过组里的大佬给我推荐了百度的webupload，但后来引入之后发现它是基于jquery封装的。由于本身项目是基于vue开发的所以与j...

ISherry 2019-08-21 11:51 评论0 收藏0
关于七牛云正确使用姿势探索

摘要：，在后续测试时遇到一个诡异，当文件过大时，任务脚本上传到七牛云失败。当我遇到大文件无法上传到七牛云时，断点调试到这里，发现返回的是。后来还真被我找到了，七牛云官方提供一个脚本工具。业务场景需求我们项目有一个文件上传需求，需要从客户端上传到七牛云的对象存储和自己的应用服务器上。这里使用七牛云主要是实现下载分发。应用服务器需要留一份是因为后续需要做文件分析（并且是上传后需要立马分析出...

3fuyu 2019-07-01 12:39 评论0 收藏0
Laravel中前端js上传图片到七牛云

摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

jollywing 2019-08-20 19:08 评论0 收藏0
Laravel中前端js上传图片到七牛云

摘要：以下中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。你的控制器地址请求成功之后，调用刚刚写好的方法，把传入过去让页面初始化的时候就请求这里差不多就可以啦，更多的操作参考文档七牛云官方文档以下Laravel中使用浏览器端上传图片到七牛云，下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件，下面是通过CDN引入的Staticfi...

EscapedDog 2019-06-28 13:39 评论0 收藏0
文件上传进度提示

摘要：需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。需求当上传的文件相对较大时，用户可能需要等待较长的时间，这个时候前端如果没有任何提示的话，体验不是很好，如果有上传进度提示，就会好很多。而要在上传过程实时显示上传进度，则需要已上传的大小和文件总大小。前提请求是异步的。因为要实时获取到上传的进度...

MageekChiu 2019-08-20 15:17 评论0 收藏0