vue组件 七牛云文件批量上传

使用方法

//页面引入
import inputFile from "@/components/common/inputFile/index";
data() {
   return {
      imgs: []
   };
}
//html
<input-file :length="9 - imgs.length" v-model="imgs"></input-file>

1.安装qiniu-js依赖

yarn add qiniu-js

2.qiniu.js文件

import * as qiniu from "qiniu-js";
//数据请求方法
import $ajax from "@/config/ajax";
export default function (files, wh, length) {
  //文件名称随机数
  var randomChar = function (l, url = "") {
    const x = "0123456789qwertyuioplkjhgfdsazxcvbnm";
    var tmp = "";
    var time = new Date();
    for (var i = 0; i < l; i++) {
      tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
    }
    return (
      "file/" +
      url +
      time.getTime() +
      tmp
    );
  };
  //获取token
  var getToken = function (callback) {
    $ajax.get("api/open/v1/qn_upload").then(data => {
      callback(data);
    });
  }

  function getWidthHeight(file, callback) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
      let images = new Image();
      images.src = e.target.result;
      images.onload = function () {
        callback(images.width, images.height);
      }
    }

  }
  // const _this = this;
  //文件数据体长度
  var len = length == 0 || files.length < length ? files.length : length;
  //图片地址
  var imgs = new Array;
  //token
  var token = "";
  var folderPath = "";
  //访问前缀
  var visitPrefix = "";
  var config = {
    //表示是否使用 cdn 加速域名
    useCdnDomain: true,
    //qiniu.region.z0: 代表华东区域
    // qiniu.region.z1: 代表华北区域
    // qiniu.region.z2: 代表华南区域
    // qiniu.region.na0: 代表北美区域
    // qiniu.region.as0: 代表东南亚区域
    region: qiniu.region.z2
    //是否禁用日志报告
    // disableStatisticsReport: false
  };
  var putExtra = {
    //文件原文件名
    fname: "",
    // 用来放置自定义变量
    params: {},
    // 用来限制上传文件类型 ,限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
    mimeType: [] || null
  };
  return new Promise((resolve, reject) => {
    getToken(red => {
      token = red.token;
      folderPath = red.folderPath;
      visitPrefix = red.visitPrefix;
      recursive(0);
    });

    //递归上传图片
    function recursive(i) {
      //上传状态
      var uploadState = true;
      var imgData = {};
      //文件上传配置
      var observable = qiniu.upload(
        files[i],
        randomChar(8, folderPath),
        token,
        putExtra,
        config
      );
      if (wh) {
        uploadState = false;
        getWidthHeight(files[i], (width, height) => {
          imgData.width = width;
          imgData.height = height;
          if (uploadState) {
            imgs.push(imgData);
            //图片上传完成
            if (i < len - 1) {
              recursive(i + 1);
            } else {
              resolve(imgs, true);
            }
          } else {
            uploadState = true;
          }
        });
      }
      //文件开始上传
      var subscription = observable.subscribe(
        res => {
          //图片上传进度
          console.log("图片上传进度", res.total.percent);
        },
        err => {
          //图片报错
          console.log(err);
          reject(err);
        },
        res => {
          if (wh) {
            imgData.url = visitPrefix + "/" + res.key;
            if (uploadState) {
              imgs.push(imgData);
              //图片上传完成
              if (i < len - 1) {
                recursive(i + 1);
              } else {
                resolve(imgs, true);
              }
            } else {
              uploadState = true;
            }
          } else {
            imgs.push(visitPrefix + "/" + res.key);
            //图片上传完成
            if (i < len - 1) {
              recursive(i + 1);
            } else {
              resolve(imgs, true);
            }
          }
        }
      );
    }
  });
}

// 上传取消
// subscription.unsubscribe();

3.index.vue文件

<template>
  <input type="file" @change="uploadFile($event)" :multiple="length > 1">
</template>
<script>
import qiniuUpload from "./qiniu.js";
export default {
  data() {
    return {
      fileUrl: []
    };
  },
  props: {
    //当前值
    value: {
      default: ""
    },
    //上传数量
    length: {
      default: 1
    },
    //是否获取图片高宽
    wh: {
      type: Boolean,
      default: false
    }
  },
  created() {
    if (this.value) {
      this.fileUrl = this.value;
    }
  },
  watch: {
    value(val) {
      if (val) {
        this.fileUrl = val;
      }
    }
  },
  methods: {
    uploadFile(event) {
      const _this = this;
      //文件数据体
      var files = event.target.files;
      var length = this.length;
      if (this.fileUrl instanceof Array) {
        length = length - this.fileUrl.length;
      }
      qiniuUpload(files, this.wh, length).then(res => {
        if (_this.length > 1) {
          _this.fileUrl = _this.fileUrl.concat(res);
        } else {
          _this.fileUrl = res[0];
        }
        _this.$emit("input", _this.fileUrl);
        console.log(_this.fileUrl);
      });
    }
  },
  mounted() {
    const _this = this;
  }
};
</script>