六四、使用JS-SDK上传文件（图片）到七牛

最新推荐文章于 2024-08-12 19:46:44 发布

夏河始溢

最新推荐文章于 2024-08-12 19:46:44 发布

阅读量8.6k

点赞数 3

分类专栏： JavaScript 文章标签： JS-SDK upload 七牛 js上传文件到七牛

本文链接：https://blog.csdn.net/zm06201118/article/details/80537558

版权

JavaScript 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

一、介绍

Qiniu-JavaScript-SDK （下文简称为 JS-SDK）适用于：IE11、Edge、Chrome、Firefox、Safari 等浏览器，基于七牛云存储官方 API 构建，其中上传功能基于 H5 File API。开发者基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。 JS-SDK 兼容支持 H5 File API 的浏览器，在低版本浏览器下，需要额外的插件如 plupload，JS-SDK 提供了一些接口可以结合插件来进行上传工作。

二、功能简介

上传
1. 大于 4M 时可分块上传，小于 4M 时直传
2. 分块上传时，支持断点续传
图片处理
1. imageView2（缩略图）
2. imageMogr2（高级处理，包含缩放、裁剪、旋转等）
3. imageInfo （获取基本信息）
4. exif （获取图片 EXIF 信息）
5. watermark （文字、图片水印）
6. pipeline （管道，可对 imageView2、imageMogr2、watermark 进行链式处理）

三、引入

直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js
使用 NPM 安装
1. npm install qiniu-js
2. import * as qiniu from ‘qiniu-js’
通过源码编译
·git clone git@github.com:qiniu/js-sdk.git，进入项目根目录执行npm install，执行 npm run build，即可在dist目录生成qiniu.min.js

四、获取token

JS-SDK 依赖服务端颁发 token，前端通过接口请求以获得 token 信息

五、使用

qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。

Example

var observable = qiniu.upload(file, key, token, putExtra, config)
var subscription = observable.subscribe(observer) // 上传开始
     // or
var subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
subscription.unsubscribe() // 上传取消

六、API

observable: 为一个带有 subscribe 方法的类实例,observable.subscribe(observer: object)
observer: observer 为一个 object，用来设置上传过程的监听函数，有三个属性 next、error、complete:

var observer = {
  next(res){ // 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded(已上传大小，单位为字节。)、total(本次上传的总量)、percent(当前上传进度，范围：0～100。)三个属性，提供上传进度信息。 },
  error(err){ // 上传错误后触发，参数 err 为一个包含 code、message、isRequestError 三个属性的 object }, 
  complete(res){ // 接收上传完成后的后端返回信息，res 参数为一个 object，默认为hash和key, }
}

file: Blob 对象，上传的文件
key: 文件资源名,如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
token: 上传验证信息，前端通过接口请求后端获得
config: object
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false
region: qiniu.region.z2, //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
disableStatisticsReport:false, //是否禁用日志报告，为布尔值，默认为false。
retryCount:3, //上传自动重试次数,默认 3 次
concurrentRequestLimit:3,//分片上传的并发请求量,默认为3次
checkByMD5:false //是否开启 MD5 校验,默认为 false，不开启。
};```
putExtra:object
fname: “”, //文件原文件名
params: {},//用来放置自定义变量
mimeType: [] || null //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： [“image/png”, “image/jpeg”, “image/gif”]
}; ```

七、上传DEMO

uploadImg(imgSource) {
    const { uptoken } = this.state
    const file = imgSource //Blob 对象，上传的文件
    const key = null  // 上传后文件资源名以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。

    let config = {
      useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
      region: qiniu.region.z0     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
    };

    let putExtra = {
      fname: "",  //文件原文件名
      params: {}, //用来放置自定义变量
      mimeType: null  //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
    };

    let observable = qiniu.upload(file, key, uptoken, putExtra, config);
    observable.subscribe({
      next: (res) => {
      // 主要用来展示进度
        let total = res.total;
        // console.log("进度：" + parseInt(total.percent) + "% ")
      },
      error: (err) => {
      // 失败报错信息
        console.log(err)
      },
      complete: (res) => {
      // 接收成功后返回的信息
      }
    })
  }

tip: