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

一、介绍

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 进行链式处理）

三、引入

方式1：直接使用静态文件地址

地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js

方式2：使用 NPM 安装

npm install qiniu-js
import * as qiniu from ‘qiniu-js’

方式3：通过源码编译

GitHub源码地址：https://blog.csdn.net/zm06201118/article/details/80537558
·git clone git@github.com:qiniu/js-sdk.git，
下载源码，打开文件夹进入项目根目录执行npm install，执行 npm run build，即可在dist目录生成qiniu.min.js，将qiniu.min.js引入到项目中

七牛源码地址.png

四、获取七牛token

获取七牛token.png

五、使用

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

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, }
}

七、上传DEMO

uploadImg(imgSource) {
    const { uptoken } = this.state//你刚获取到的token
    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) => {
        conesole.log(res)//res.key==>图片名字，和服务器名字拼接就可以了
        let imgUrl = "http://img.sdfsf.com/." + res.key
        //然后拿着这个图片路径，发起表单提交请求，保存到对应字段
      }
    })
  }

参考连接：https://blog.csdn.net/zm06201118/java/article/details/80537558