Vue文件上传七牛云

今天公司写项目要把vue的文件上传七牛云不经过后端了，提升了一定的效率，我就把我测试的代码放入博客

以供以后使用

首先

我们在vue里面安装一下

npm install qiniu-js

然后哪个页面用到在哪个页面导入

var qiniu = require('qiniu-js')

 

我们看文档里的代码（这个是生成token 我是后端生成的） 后端我用的是python里的Django框架

from qiniu import Auth
#需要填写你的 Access Key 和 Secret Key
access_key = '自己填'
secret_key = '自己填'
#构建鉴权对象
q = Auth(access_key, secret_key)
#要上传的空间
bucket_name = '七牛云空间名称'
#生成上传 Token，可以指定过期时间等
#3600为token过期时间，秒为单位。3600等于一小时
token = q.upload_token(bucket_name, key, 3600, policy)
print(token)

生成token后我们拿着token来到vue里面搞事情

uploadFile(){
        let _this = this;//下方用到的参数
        var config = {
          useCdnDomain: true,
          region: null
        };
        var putExtra = {
          fname: "",
          params: {},
          mimeType: null
        };
        var observable = qiniu.upload(_this.file, 'kongjjjjjj', _this.token, putExtra, config)

        var observer = {
          next(res){
            console.log(res.total.percent,'123')
          },
          error(err){
            console.log(err,'456')
          },
          complete(res){
            console.log(res,'789')
          }
        }
        var subscription = observable.subscribe(observer) // 上传开始  
      }

observer: observer 为一个 object，用来设置上传过程的监听函数，有三个属性 next、error、complete

• next: 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进度信息。

  • total.loaded: number，已上传大小，单位为字节。
  • total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
  • total.percent: number，当前上传进度，范围：0～100。

• error: 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：

  • err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
  • err.reqId: string，xhr请求错误的 X-Reqid。
  • err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，
  • err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。

• complete: 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息，具体返回结构取决于后端sdk的配置

• file: Blob 对象，上传的文件

• key: 文件资源名
• token: 上传验证信息，前端通过接口请求后端获得

• config: object

  • config.useCdnDomain: 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
  • config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为false。
  • config.region: 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
  • config.retryCount: 上传自动重试次数（整体重试次数，而不是某个分片的重试次数）；默认 3 次（即上传失败后最多重试两次）；目前仅在上传过程中产生 599 内部错误时生效，但是未来很可能会扩展为支持更多的情况。
  • config.concurrentRequestLimit: 分片上传的并发请求量，number，默认为3；因为浏览器本身也会限制最大并发量，所以最大并发量与浏览器有关。
  • config.checkByMD5: 是否开启 MD5 校验，为布尔值；在断点续传时，开启 MD5 校验会将已上传的分片与当前分片进行 MD5 值比对，若不一致，则重传该分片，避免使用错误的分片。读取分片内容并计算 MD5 需要花费一定的时间，因此会稍微增加断点续传时的耗时，默认为 false，不开启。
• putExtra:
  • • fname: string，文件原文件名
    • params: object，用来放置自定义变量
    • mimeType: null || array，用来限定上传文件类型，指定null时自动判断文件类型。
      ["image/png", "image/jpeg", "image/gif"]