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

最新推荐文章于 2022-12-10 09:55:29 发布

_Lunay

最新推荐文章于 2022-12-10 09:55:29 发布

阅读量1.2k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

82 篇文章 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 提供了一些接口可以结合插件来进行上传工作。
二、功能简介
上传

大于 4M 时可分块上传，小于 4M 时直传
分块上传时，支持断点续传

图片处理

imageView2（缩略图）
imageMogr2（高级处理，包含缩放、裁剪、旋转等）
imageInfo （获取基本信息）
exif （获取图片 EXIF 信息）
watermark （文字、图片水印）
pipeline （管道，可对 imageView2、imageMogr2、watermark 进行链式处理）

三、引入

直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js
使用 NPM 安装

npm install qiniu-js
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

var config = { 
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

var putExtra = { 
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;
        window.Qapp.showLoad({content:'上传图片中！'})
        // console.log("进度：" + parseInt(total.percent) + "% ")
      },
      error: (err) => {
      // 失败报错信息
        console.log(err)
        window.Qapp.hideLoad()
        window.Qapp.showToast({content:'上传错误！'})
      },
      complete: (res) => {
      // 接收成功后返回的信息
        window.Qapp.hideLoad()
        console.log(res.hash)
      }
    })
  }

tip:
上传报400：incorrect region, please use xxxx.qiniu.com为region设置错误，修改为提示的地区就可以官方提示
---------------------

原文：https://blog.csdn.net/zm06201118/article/details/80537558