使用Qiniu-JavaScript-SDK上传文件至七牛云存储

一、Qiniu-JavaScript-SDK介绍

　　基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储，并对上传成功后的图片进行丰富的数据处理操作。
　　JS-SDK 兼容支持 H5 File API 的浏览器，在低版本浏览器下，需要额外的插件如 plupload，JS-SDK 提供了一些接口可以结合插件来进行上传工作。

　　Qiniu-JavaScript-SDK 为客户端 SDK，没有包含 token 生成实现，为了安全，token 建议通过网络从服务端获取，具体生成代码可以参考服务端 SDK 的文档。

1、参考文档

　　官方API文档：JavaScript SDK

　　基于七牛 API 开发的前端 JavaScript SDK 源码地址：https://github.com/qiniu/js-sdk

2、引入（NPM安装）

　　NPM 的全称是 Node Package Manager，是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。

$ npm install qiniu-js

二、vue项目实现　　

　　创建七牛上传组件：/src/components/chart/QiniuUpload.vue

　　下面代码中集成了上传进度条，及上传完成提示，还添加了已上传文件的文件名显示：

<template>
  <div class="ft-plant-upload-button" :class="boxClass">
    <Button class="upload-btn" type="ghost" icon="ios-cloud-upload-outline" :disabled="percent > 0 && percent < 100" @click="zh_uploadFile">{{qiniuUploadDesc}}</Button>
    <div class="progress-wraper" v-if="showProgress">
      <div class="progress" v-if="percent > 0 && percent < 100">
        <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" :style="{ percent+'%'}">
        </div>
      </div>
      <div class="precent" v-if="percent > 0 && percent < 100">
        {{percent || 0 }}%
      </div>
    </div>
    <div class="file-name" v-else>
      {{fileName}}
    </div>
    <input type="file" ref="evfile" @change="zh_uploadFile_change" style="display:none">
    <input type="hidden" :value="qiniuKey">
  </div>

</template>

<script>
  import * as qiniu from "qiniu-js"

  export default {
    name: "QiniuUpload",
    props: {   // 子组件的props选项
      qiniuUploadDesc: {
        type: String,
        default: '上传文件'
      },
      classroomUpload: {
        default: '未知classroom'
      },
      filetype: {
        type: String
      },
      boxClass: {
        type: String,
        default: ''
      },
      fileName: {
        type: String
      }
    },
    data(){
      return {
        queryInfo: {
          limit: 10,
          offset: 0,
        },
        token: "",
        qiniuKey: "",
        percent: 0,
        percentText: "",
        showProgress: false
      }
    },
    methods: {
      beforeImageUpload(file) {  // 限制图片格式和大小
        const isPng = file.type === "image/png";
        const isJpeg = file.type === "image/jpeg";
        const isJpg = file.type === "image/jpg";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isPng && !isJpeg && !isJpg) {
          this.$showDialog("警告信息", "上传图片只能是 jpg、png、jpeg 格式!");
          return false;    // 等同于retrun false;  不执行
        } else if (!isLt2M) {
          this.$showDialog("警告信息", "上传图片大小不能超过2MB！");
          return false;
        } else {
          return true;
        }
      },
      httpGetList: function () {
        var self = this;
        this.$httpGet(this.$http, "users/dataController/getUploadToken", this.$trimJson(self.queryInfo), function (ret) {
          console.log('ret', ret.token);
          return ret.token;
        });
      },
      //选择上传文件
      zh_uploadFile(){
        this.$refs.evfile.click();
      },
      //选择文件后触发的事件
      zh_uploadFile_change(evfile){
        if (evfile){
          this.showProgress = true;   // 显示上传过程
          //后端获取token
          this.getQiniuToken().then(res=>{
            console.log('res', res);
            var uptoken = res;
            var userno = this.$sessionUser.fetch().userno;
            var timestamp = Date.parse(new Date());   // 时间戳
            var file = evfile.target.files[0];     //Blob 对象，上传的文件
            var key = "";
            if (this.filetype === "idCodeImg") {
              // 身份证照片
              if (this.beforeImageUpload(file)) {
                key = this.filetype + '/U' + userno + 'T' + timestamp + '/' + file.name;
              } else {
                return;
              }
            } else if (this.filetype === "cardImg") {
              // 证件照片
              if (this.beforeImageUpload(file)) {
                key = this.filetype + '/U' + userno + 'T' + timestamp + '/' + file.name;
              } else {
                return;
              }
            } else{
              // 课堂附件
              this.$emit('change', file.name);
              key = this.filetype + '/' + this.classroomUpload + '/U' + userno + 'T' + timestamp + '.' + file.name.split('.').pop();      // 上传后文件资源名,以设置的 key 为主，如果 key 为 null 或者 undefined，则文件资源名会以 hash 值作为资源名。
            }
            let config = {
              useCdnDomain: true,         // 表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
              region: qiniu.region.z1     // 上传域名区域（z1为华北）,当为 null 或 undefined 时，自动分析上传域名区域
            };

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

            // observable是一个带有 subscribe 方法的类实例
            var observable = qiniu.upload(file, key, uptoken, putExtra, config);
            var subscription = observable.subscribe({   // 上传开始
              next: (result) => {
                // 接收上传进度信息，result是带有total字段的 Object
                // loaded: 已上传大小; size: 上传总信息; percent: 当前上传进度
                console.log(result);    // 形如：{total: {loaded: 1671168, size: 2249260, percent: 74.29856930723882}}
                this.percent = result.total.percent.toFixed(0);
              },
              error: (errResult) => {
                // 上传错误后失败报错
                console.log(errResult)
              },
              complete: (result) => {
                // 接收成功后返回的信息
                console.log(result);   // 形如：{hash: "Fp5_DtYW4gHiPEBiXIjVsZ1TtmPc", key: "%TStC006TEyVY5lLIBt7Eg.jpg"}
                this.qiniuKey = result.data.key;
                this.showProgress = false;
                this.$emit('key', this.qiniuKey);
                this.$emit('url', result.data.url);
              }
            })
          })
        }
      },
      getQiniuToken(){
        return new Promise((resolve, reject)=>{
          var self = this;
          this.$httpGet(this.$http, "users/dataController/getUploadToken", this.$trimJson(self.queryInfo), function (ret) {
            console.log('ret', ret.token);
            resolve(ret.token);
          });
        })
      }
    },
    mounted() {
      this.$pageInit();
      this.fileToken = this.$sessionUser.fetch().fileToken;
    }
  }
</script>

2、在父组件中引入七牛上传组件

　　使用props传递属性到子组件。这样可以拼接出比较复杂的文件名（key: 文件资源名）。

<template>
  <div class="app-content">
    <section class="section">
      <v-breadcrumb></v-breadcrumb>
      <div class="section-body">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-header">
                <h4>编辑/添加招生学生</h4>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group row">
                      <label for="idCardFront" class="col-md-4 col-form-label">身份证正面上传(头像)</label>
                      <QiniuUpload id="idCardFront" filetype="idCodeImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-idImg1'"
                                   @url="setFrontUrl" :fileName="queryInfo.idImg1.split('/').pop()">
                        <template slot="uploadTitle">
                        </template>
                      </QiniuUpload>
                    </div>
                    <div class="form-group row">
                      <label for="idCardBack" class="col-md-4 col-form-label">身份证反面上传(国徽)</label>
                      <QiniuUpload id="idCardBack" filetype="idCodeImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-idImg2'"
                                   @url="setBackUrl" :fileName="queryInfo.idImg2.split('/').pop()">
                        <template slot="uploadTitle">
                        </template>
                      </QiniuUpload>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group row">
                      <label for="cardType" class="col-md-3 col-form-label">学历证件</label>
                      <div class="col-md-5 m-t-5 m-b-5">
                        <Enums type="card_type" id="cardType" v-model="queryInfo.cardType" placeholder="请选择证件类型"></Enums>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label for="idCardBack" class="col-md-3 col-form-label">学历证件上传</label>
                      <QiniuUpload id="cardImg" filetype="cardImg" :qiniuUploadDesc="'上传图片'" :boxClass="'add-cardImg'"
                                   @url="setCardUrl" :fileName="queryInfo.cardImg.split('/').pop()">
                        <template slot="uploadTitle">
                        </template>
                      </QiniuUpload>
                    </div>
                  </div>
                </div>