2019-07-09 基于vue+iview 七牛云上传组件封装(易改成其他UI)

首先需要 npm install qiniu-js --save

接下来是组件代码：

引用：

import ZhUpload from '@/components/qiniu-upload/quick-upload.vue';//路径和组件名称自己定义

注册组件:

  components : {
      ZhUpload,
  },

传参（refid 组件id,多个需要传、uploadType 我的业务需要传的你可以不传、fileNext 上传过程中的回调 complete 上传完成的回调 error 上传错误的回调）：

标签：

事件(具体业务逻辑自己调整)：

    fileNext (result) {
      this.flieProgress=result[0].total.percent.toFixed(2);
      //转化时间
      this.leastTime=formatSeconds(result[1]);
      if(this.flieFalg){
        this.flieFalg=false;
        // 主要用来展示进度
        this.$Notice.info({
          title: "上传中，请稍后....",
          duration: 0,
          render: h => {
            return h('span', [
                h('div',{
                  style:{
                    color:"red",
                  },
                },`上传过程请勿关闭浏览器或执行其他操作！`),
                h('div', `进度${this.flieProgress}%,预计剩余${this.leastTime}`),
              ])
          },
          onClose:()=>{
            this.$refs.myupload.cancelUpload();//取消文件上传
            this.$Message.warning({content:'文件上传已取消',duration:2});
            this.flieFalg=true;
          }
        });
      }
    },

    fileError (errResult) {
      // 失败报错信息
      this.$Notice.destroy();
      this.$Notice.error(errResult);
    },

    fileComplete (result) {
      // 接收成功后返回的信息
      console.log(result)
      this.mEviPath ='hasLoad';
      this.$Notice.destroy();
      this.flieFalg=true;
      this.flieProgress=0;
      //发送上传的文件名给后端由后端解析文件返回证据文件信息
      this.$Notice.info({
          title: '正在解压文件..请稍后',
          duration:0,
      });
      hUpload({filePath:result.key,type:'2'}).then(res=>{
          this.mEvidenceShow(res.data.data);
          this.mEvidence_fileName1 ='已上传';
          this.$Message.success("上传成功");
          this.$Notice.destroy();
      });
    },