Vue使用WebUploader上传文件/压缩包

npm i webuploader -S

引入

//引入webuploader
import WebUploader from "webuploader";
import "webuploader/dist/webuploader.css";

页面

<el-row class="webUploader">
    <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
      <el-button
        class="selectFile"
        :disabled="disabled"
        type="primary"
        size="mini"
        ref="selectFile"
      >
        选择文件
      </el-button>
      <el-button
        @click="submitFile"
        :disabled="disabled"
        type="success"
        size="mini"
        >开始上传</el-button
      >
    </el-col>
    <el-col :span="24">
      <el-table :data="value" :disabled="disabled" size="mini">
        <el-table-column
          label="文件名"
          align="left"
          key="fileName"
          prop="fileName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="大小"
          align="center"
          key="fileSize"
          prop="fileSize"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="进度"
          align="center"
          key="fileProgress"
          prop="fileProgress"
        >
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.fileProgress"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          key="fileStatus"
          prop="fileStatus"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="resume(scope.row.file)"
              v-hasPermi="['system:user:edit']"
              :disabled="scope.row.fileStatus === '上传成功'"
              >开始</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-pause"
              @click="stop(scope.row.file)"
              :disabled="scope.row.fileStatus === '上传成功'"
              v-hasPermi="['system:user:remove']"
              >暂停</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              :disabled="disabled"
              @click="remove(scope.row, scope.$index)"
              v-hasPermi="['system:user:resetPwd']"
              >移除</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-camera"
              @click="imgLook(scope.row.fileId)"
              :disabled="scope.row.fileStatus !== '上传成功'"
              v-hasPermi="['system:user:resetPwd']"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

用法

export default {
  name: "uploaderList",
  components: {},
  props: {
    accept: {
      type: [String, Object],
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: "url"
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default: 100
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 5120000
    },
    fileType: {
      type: String,
      default: "knowledge"
    },
    // 上传时传给后端的参数，一般为token，key等
    formData: {
      type: Object,
      default: () => {
        return { guid: null, code: 9 };
      }
    },
    // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
    keyGenerator: {
      type: Function,
      default: () => `${new Date().getTime()}`
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: ""
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      uploader: null
    };
  },
  watch: {
    disabled(newVal) {
      if (newVal) {
        this.uploader.destroy();
        return false;
      }
      this.initWebUpload();
    }
  },
  mounted() {
    if (!this.disabled) {
      this.initWebUpload();
    }
  },
  methods: {
    initWebUpload() {
      if (this.uploader) {
        this.uploader.destroy();
      }
      const uploader = (this.uploader = WebUploader.create({
        auto: false, // 选完文件后，是否自动上传
        // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
        //pick: { id: "#up_single", multiple: false },
          id: this.$refs.selectFile.$el, // 选择文件的按钮
          multiple: this.multiple // 是否多文件上传 默认false
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads: 3,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: true, //分片上传
        chunkSize: 5120000, //分片大小
        duplicate: true // 重复上传
        //上传文件格式
        //accept: {
         // extensions: "doc,docx,pdf,txt,xls,xlsx,jpg,png,mp4,avi",
        //  mimeTypes: ".doc,.docx,.pdf,.txt,.xls,.xlsx,.jpg,.png,.mp4,.avi",
       // },
         accept: {
          extensions: "zip,rar,ios,7z",
          mimeTypes: ".zip,.rar,.ios,.7z,",
        },
      }));
      const fun = [
        "fileQueued",
        "uploadStart",
        "uploadProgress",
        "uploadSuccess",
        "error"
      ];
      for (const item of fun) {
        uploader.on(item, this[item]);
      }
      return uploader;
    },
    // 当有文件被添加进队列的时候，添加到页面预览
    fileQueued(file) {
      const { name, size, id } = file;
      const obj = {
        id,
        fileName: name,
        fileSize: WebUploader.Base.formatSize(size),
        fileProgress: 0,
        fileStatus: "待上传",
        file
      };
      this.value.push(obj);
    },
    // 在这里可以准备好formData的数据
    uploadStart() {
      this.uploader.options.formData.guid = this.keyGenerator();
    },
    // 文件上传过程中创建进度条实时显示。
    uploadProgress(file, percentage) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      fileObj.fileStatus = "上传中";
      fileObj.fileProgress = parseInt(percentage * 100);
      fileObj.file = file;
    },
    // 文件上传成功
    async uploadSuccess(file, res) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      try {
        const { data } = await combine({
          guid: res.guid,
          fileName: file.name,
          fileType: this.fileType,
          code: res.code
        });
        fileObj.fileId = data.fileId;
        fileObj.fileStatus = "上传成功";
        this.$emit("input", this.value);
      } catch (err) {
        fileObj.fileProgress = 0;
        fileObj.fileStatus = "上传失败,请点击开始重新上传";
      }
    },
    error(type) {//报错信息
      let errorMessage = "";
      if (type === "F_EXCEED_SIZE") {
        errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
          (1024 * 1000)}M`;
      } else if (type === "Q_EXCEED_NUM_LIMIT") {
        errorMessage = "文件上传已达到最大上限数";
      } else {
        errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;
      }
      console.error(errorMessage);
    },
    // 开始
    resume(file) {
      this.uploader.upload(file);
    },
    // 暂停
    stop(file) {
      file.fileStatus = "暂停中";
      this.uploader.stop(file);
    },
    // 移除
    async remove(row, idx) {
      const { fileId, file } = row;
      try {
        if (fileId) await delFileApi(fileId);
        this.value.splice(idx, 1);
        if (file) {
          // 取消并中断文件上传
          this.uploader.cancelFile(file);
          // 在队列中移除文件
          this.uploader.removeFile(file, true);
        }
        this.$emit("input", this.value);
      } catch (error) {}
    },
    // 预览
    imgLook(fileId) {
      if (!fileId) {
        return false;
      }
      lookImg(fileId).then(res => {
        const sourceImages = [];
        sourceImages.push({
          thumbnail:
            process.env.VUE_APP_BASE_API +
            this.profile +
            res.data.thumbnailFile,
          source:
            process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
        });
        // console.log(sourceImages);
        this.$refs.viewer.show(sourceImages, 0);
      });
    },
      //上传文件格式
    getAccept(accept) {
      switch (accept) {
        case "text":
          return {
            title: "Texts",
            exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",
            mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
          };
        case "video":
          return {
            title: "Videos",
            exteensions: "mp4",
            mimeTypes: ".mp4"
          };
        case "image":
          return {
            title: "Images",
            exteensions: "gif,jpg,jpeg,bmp,png,tif",
            mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"
          };
        default:
          return accept;
      }
    },
    submitFile() {
      this.uploader.upload();
    }
  }
};

引入组件

//引入
import UploaderList from "@/components/upload/uploadList.vue";
components: { UploaderList },
//使用
 <UploaderList
    v-model="imageList"
    :formData="{ guid: null, fileCategory: 1, code: 7 }"
    :fileType="'targetFacility'"
/>

1.下载webuploader

下载地址：官网http://fex.baidu.com/webuploader/

2.引入webuploader

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。
方法1.直接引入文件
这里我们使用完全压缩版的webuploader.min.js,同时还要引入Uploader.swf 、 webuploader.css，所以可以删除其他版本的文件，只留这三个文件，将解压的webuploader文件夹直接放在static文件夹下.

在index.html中引入webuploader.min.js

<script src="./static/webuploader-0.1.5/webuploader.min.js"></script>

重启项目后报错了，说缺少依赖jquery,打开源码webuploader.js看一下

原来webuploader是依赖于juqery或者Zepto的，那我们引入jquery,我们去jquery官网下载jquery,并在index.html中引入，注意，一定要在webuploader.min.js之前引入，在这里我下载的是1.12.4版本

<script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>

方法2：模块化引入
下载webuploder

npm install webuploader --save

下载jquery

npm install jquery@1.12.4

在App.vue中引入webuploder和jquery

import $ from 'jquery'
import WebUploader from 'webuploader'

3.实例

upload.vue

<template>
    <div id="uploader" class="wu-example">
      <!--用来存放文件信息-->
      <div id="fileLilst" class="uploader-list"></div>
          <div class="btns">
            <!-- 选择文件的按钮 -->
              <div id="picker">选择文件</div>
            <!-- 开始上传按钮 -->
              <button id="uploadBtn" class="btn btn-default">开始上传</button>
      </div>
    </div>
</template>
<script>
import $ from 'jquery'
import WebUploader from 'webuploader'
var fileMd5;
//自定义参数 文件名
var fileName, uploader;
export default {
    name: 'upload',
	mounted() {
		this.getAllFileList()
      this.uploadPlan = `上传完成（${this.fileNum} / ${this.completeNum}）`

      //监听分块上传过程中的三个时间点  
      WebUploader.Uploader.register({
        "before-send-file": "beforeSendFile",  //整个文件上传前调用
        "before-send": "beforeSend",  //每个分片上传前
        "after-send-file": "afterSendFile",  //分片上传完毕
      }, {
        //时间点1：所有分块进行上传之前调用此函数  
        beforeSendFile: function (file) {
          //console.log("beforeSendFile");
          var deferred = WebUploader.Deferred();
          //1、计算文件的唯一标记，用于断点续传  
          (new WebUploader.Uploader()).md5File(file, 0, 2 * 1024 * 1024)
            .progress(function (percentage) {
              $('#item1').find("p.state").text("正在读取文件信息...");
            })
            .then(function (val) {
              fileMd5 = val;
              $('#item1').find("p.state").text("成功获取文件信息...");
              //获取文件信息后进入下一步  
              deferred.resolve();
            });
          return deferred.promise();
        },
        //时间点2：如果有分块上传，则每个分块上传之前调用此函数  
        beforeSend: function (block) {
          console.log("beforeSend111111");
          console.log(block.chunk);
          var deferred = WebUploader.Deferred();
          $.ajax({
            type: "POST",
            url: "http://58.251.218.38:8080/BIMService2/model/checkOrMerge?action=checkChunk",
            data: {
              //文件唯一标记  
              fileMd5: fileMd5,
              //当前分块下标  
              //chunk:block.chblocknk, 
              chunk: block.chunk,
              //当前分块大小  
              chunkSize: block.end - block.start,
              userId: localStorage.getItem("userId")
            },
            dataType: "json",
            success: function (response) {
              if (eval('(' + response.ifExist + ')')) {
                //console.log("分片存在:" + block.chunk)
                //分块存在，跳过  
                deferred.reject();
              } else {
                //console.log("分片不存在:" + block.chunk)
                //分块不存在或不完整，重新发送该分块内容  
                deferred.resolve();
              }
            }
          });
          this.owner.options.formData.fileMd5 = fileMd5;
          console.log("继续执行")
          //deferred.resolve();  
          return deferred.promise();
        },
        //时间点3：所有分块上传成功后调用此函数  
        afterSendFile: function (file) {
          //console.log("afterSendFile");
          fileName = file.name; //为自定义参数文件名赋值
          //如果分块上传成功，则通知后台合并分块  
          $.ajax({
            type: "POST",
            url: "http://58.251.218.38:8080/BIMService2/model/checkOrMerge?action=mergeChunks",
            data: {
              fileMd5: fileMd5,
              fileName: fileName,
              ext: file.ext, //文件扩展名
              projectName: $("#project option:selected").text(), //项目名称
              userId: localStorage.getItem("userId")
            },
            success: function (response) {
              console.log(response)
              //alert("上传成功");   
            }
          });
        }
      });
      uploader = WebUploader.create({
        swf: 'static/webuploader/Uploader.swf', // swf文件路径
        formData: { projectName: "", userId: localStorage.getItem("userId") },
        server: 'http://58.251.218.38:8080/BIMService2/model/upload', // 文件接收服务端。
        pick: '#picker', // 选择文件的按钮。可选
        chunked: true, //是否要分片处理大文件上传
        chunkSize: 2 * 1024 * 1024, //分片上传，每片5M，默认是5M
        auto: true, //选择文件后是否自动上传
        chunkRetry: 2, //如果某个分片由于网络问题出错，允许自动重传次数
        //runtimeOrder: 'html5,flash',
        // 在上传当前文件时，准备好下一个文件
        prepareNextFile: false,
        threads: 1, //threads {Boolean} [可选] [默认值：3] 上传并发数。允许同时最大上传进程数。
        duplicate: false,//是否重复上传（同时选择多个一样的文件），true可以重复上传  
        /* accept: {
          title: '语音上传',
          extensions: 'wav,zip,rar',
          mimeTypes: 'audio/x-wav,.zip,.rar'
        } */
      });
      this.initWebUpload()
	}，
	methods: {
		initWebUpload() {
		//当文件被加入队列之前触发
            uploader.on('beforeFileQueued', (file, data) => {
               //console.log('beforeFileQueued')
                    $.ajax({  
                        type:"POST",  
                        url:"http://58.251.218.38:8080/BIMService2/model/permissionVerification",  
                        data:{  
                            userId: localStorage.getItem("userId")
                        },  
                        dataType:"json",  
                        success (response){  
                            let msg = response.message
                            if (msg === '请先登录账号') {
                                this.$message.error(msg);
                                this.$router.push({path: '/Login'});
                                return false;
                            } else if (msg === '您没有使用权限,请先联系管理员获取使用权限') {
                                this.$message.error(msg);
                            }
                        }
                    }); 
            });
            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', (file) => {
                //console.log('fileQueued')
                this.filesList.push({
                    id: file.id,
                    name: file.name,
                    size: this.reducedUnit(file.size),
                    percentage: 0
                })
                this.fileNum = this.filesList.length
            });
            //绑定uploadBeforeSend事件来给每个独立的文件添加参数
            uploader.on('uploadBeforeSend', (block, data) => {
                //设置data参数
                //data.projectName = $("#project").find("option:selected").text();   // 将存在file对象中的md5数据携带发送过去。
            }, 2);
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', (file, percentage) => {
                //console.log('uploadProgress')
                this.filesList.forEach(item=>{
                    if(file.id===item.id) {
                        item.percentage = (percentage.toFixed(2))*100+"%"
                    }
                })
            });
            // 文件上传成功
            uploader.on( 'uploadSuccess', (file, response)=> {
                //console.log('uploadSuccess')
                //console.log(response._raw); //这里可以得到后台返回的数据
                this.filesList.forEach(item=>{
                    if(file.id===item.id) {
                        item.percentage = '上传成功'
                    }
                })
                this.completeNum++
                this.getAllFileList()
            });

            // 文件上传失败，显示上传出错
            uploader.on('uploadError', (file, ret) => {
                //console.log('上传失败')
                this.filesList.forEach(item=>{
                    if(file.id===item.id) {
                        item.percentage = '上传失败'
                        }
                    })
            });
            // 完成上传完
            uploader.on('uploadComplete', (file) => {
                $('#' + file.id).find('.progress').fadeOut();
            });
        },
        //暂停上传
        pauseUpload () {
            uploader.cancelFile(uploader.getFiles()[0].id);
        },
        //取消上传
        removeFile (index, row) {
            //this.filesList.splice(this.filesList.indexOf(row.name), 1);
            this.filesList.splice(index, 1)
        },
    }
}

4.遇到的问题

1）WebUploader 插件的上传按钮点击无效，按F12 之后才有反应
问题：上传按钮无效，debug的时候发现（上传id元素下面插件的渲染的宽度：1px，高度：1px），下面是错误图例说明：

解决方案：
在页面加一段样式：

<style>  
    #picker div:nth-child(2){width:100%!important;height:100%!important;}  
</style> 

如果上传按钮用的不是div 标签，改为div 标签，如<span id="picker">选择图片，改为<div id="picker">选择图片。

如果做了第一步但用的是span 标签的话，只有鼠标在文字下方的按钮区域才有效(有效时，鼠标移上去按钮颜色会变深，无效时按钮没反应)，按F12之后，只有鼠标在文字上方的按钮区域点击才有效；

用div 的话就没这个问题，整个按钮都正常。
2)修改按钮样式

<style>
.webuploader-container {
   position: relative;
}
.webuploader-element-invisible {
   position: absolute !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px,1px,1px,1px);
}
.webuploader-pick {
   position: relative;
   display: inline-block;
   cursor: pointer;
   background: #3376ff;
   padding: 8px 12px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   border-radius: 3px;
   overflow: hidden;
}
.webuploader-pick-hover {
   background: #065ffc;
}
</style>

参考网址：
https://blog.csdn.net/Easy_____/article/details/78250736
https://www.cnblogs.com/ocean-sky/p/7575980.html

vue中大文件上传webuploader前端用法

首先呢需要安装webuploader；

命令:

npm i webuploader -S

下载完成以后在vue文件中引入

//引入webuploader
import WebUploader from "webuploader";
import "webuploader/dist/webuploader.css";

然后页面中需要有上传按钮和上传列表以及上传进度条的东西，首先写好dom页面中

<el-row class="webUploader">
    <el-col :span="24" class="mb20" :style="{ display: 'flex' }">
      <el-button
        class="selectFile"
        :disabled="disabled"
        type="primary"
        size="mini"
        ref="selectFile"
      >
        选择文件
      </el-button>
      <el-button
        @click="submitFile"
        :disabled="disabled"
        type="success"
        size="mini"
        >开始上传</el-button
      >
    </el-col>
    <el-col :span="24">
      <el-table :data="value" :disabled="disabled" size="mini">
        <el-table-column
          label="文件名"
          align="left"
          key="fileName"
          prop="fileName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="大小"
          align="center"
          key="fileSize"
          prop="fileSize"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="进度"
          align="center"
          key="fileProgress"
          prop="fileProgress"
        >
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.fileProgress"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          key="fileStatus"
          prop="fileStatus"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-play"
              @click="resume(scope.row.file)"
              v-hasPermi="['system:user:edit']"
              :disabled="scope.row.fileStatus === '上传成功'"
              >开始</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-pause"
              @click="stop(scope.row.file)"
              :disabled="scope.row.fileStatus === '上传成功'"
              v-hasPermi="['system:user:remove']"
              >暂停</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              :disabled="disabled"
              @click="remove(scope.row, scope.$index)"
              v-hasPermi="['system:user:resetPwd']"
              >移除</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-video-camera"
              @click="imgLook(scope.row.fileId)"
              :disabled="scope.row.fileStatus !== '上传成功'"
              v-hasPermi="['system:user:resetPwd']"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

接下来是上传方法的使用，在vue中使用封装，源码如下

export default {
  name: "uploaderList",
  components: {},
  props: {
    accept: {
      type: [String, Object],
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: "url"
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default: 100
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 5120000
    },
    fileType: {
      type: String,
      default: "knowledge"
    },
    // 上传时传给后端的参数，一般为token，key等
    formData: {
      type: Object,
      default: () => {
        return { guid: null, code: 9 };
      }
    },
    // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
    keyGenerator: {
      type: Function,
      default: () => `${new Date().getTime()}`
    },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: ""
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      uploader: null
    };
  },
  watch: {
    disabled(newVal) {
      if (newVal) {
        this.uploader.destroy();
        return false;
      }
      this.initWebUpload();
    }
  },
  mounted() {
    if (!this.disabled) {
      this.initWebUpload();
    }
  },
  methods: {
    initWebUpload() {
      if (this.uploader) {
        this.uploader.destroy();
      }
      const uploader = (this.uploader = WebUploader.create({
        auto: false, // 选完文件后，是否自动上传
        // swf: '/static/lib/webuploader/Uploader.swf',  // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
          id: this.$refs.selectFile.$el, // 选择文件的按钮
          multiple: this.multiple // 是否多文件上传 默认false
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads: 3,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: true, //分片上传
        chunkSize: 5120000, //分片大小
        duplicate: true // 重复上传
      }));
      const fun = [
        "fileQueued",
        "uploadStart",
        "uploadProgress",
        "uploadSuccess",
        "error"
      ];
      for (const item of fun) {
        uploader.on(item, this[item]);
      }
      return uploader;
    },
    // 当有文件被添加进队列的时候，添加到页面预览
    fileQueued(file) {
      const { name, size, id } = file;
      const obj = {
        id,
        fileName: name,
        fileSize: WebUploader.Base.formatSize(size),
        fileProgress: 0,
        fileStatus: "待上传",
        file
      };
      this.value.push(obj);
    },
    // 在这里可以准备好formData的数据
    uploadStart() {
      this.uploader.options.formData.guid = this.keyGenerator();
    },
    // 文件上传过程中创建进度条实时显示。
    uploadProgress(file, percentage) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      fileObj.fileStatus = "上传中";
      fileObj.fileProgress = parseInt(percentage * 100);
      fileObj.file = file;
    },
    // 文件上传成功
    async uploadSuccess(file, res) {
      const fileObj = this.value.find(obj => file.id == obj.id);
      try {
        const { data } = await combine({
          guid: res.guid,
          fileName: file.name,
          fileType: this.fileType,
          code: res.code
        });
        fileObj.fileId = data.fileId;
        fileObj.fileStatus = "上传成功";
        this.$emit("input", this.value);
      } catch (err) {
        fileObj.fileProgress = 0;
        fileObj.fileStatus = "上传失败,请点击开始重新上传";
      }
    },
    error(type) {//报错信息
      let errorMessage = "";
      if (type === "F_EXCEED_SIZE") {
        errorMessage = `文件大小不能超过${this.fileSingleSizeLimit /
          (1024 * 1000)}M`;
      } else if (type === "Q_EXCEED_NUM_LIMIT") {
        errorMessage = "文件上传已达到最大上限数";
      } else {
        errorMessage = `上传出错！请检查后重新上传！错误代码${type}`;
      }
      console.error(errorMessage);
    },
    // 开始
    resume(file) {
      this.uploader.upload(file);
    },
    // 暂停
    stop(file) {
      file.fileStatus = "暂停中";
      this.uploader.stop(file);
    },
    // 移除
    async remove(row, idx) {
      const { fileId, file } = row;
      try {
        if (fileId) await delFileApi(fileId);
        this.value.splice(idx, 1);
        if (file) {
          // 取消并中断文件上传
          this.uploader.cancelFile(file);
          // 在队列中移除文件
          this.uploader.removeFile(file, true);
        }
        this.$emit("input", this.value);
      } catch (error) {}
    },
    // 预览
    imgLook(fileId) {
      if (!fileId) {
        return false;
      }
      lookImg(fileId).then(res => {
        const sourceImages = [];
        sourceImages.push({
          thumbnail:
            process.env.VUE_APP_BASE_API +
            this.profile +
            res.data.thumbnailFile,
          source:
            process.env.VUE_APP_BASE_API + this.profile + res.data.thumbnailFile
        });
        // console.log(sourceImages);
        this.$refs.viewer.show(sourceImages, 0);
      });
    },
      //上传文件格式
    getAccept(accept) {
      switch (accept) {
        case "text":
          return {
            title: "Texts",
            exteensions: "doc,docx,xls,xlsx,ppt,pptx,pdf,txt",
            mimeTypes: ".doc,docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
          };
        case "video":
          return {
            title: "Videos",
            exteensions: "mp4",
            mimeTypes: ".mp4"
          };
        case "image":
          return {
            title: "Images",
            exteensions: "gif,jpg,jpeg,bmp,png,tif",
            mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.tif"
          };
        default:
          return accept;
      }
    },
    submitFile() {
      this.uploader.upload();
    }
  }
};

封装完毕，在想用的地方使用

//引入
import UploaderList from "@/components/upload/uploadList.vue";
components: { UploaderList },
//使用
 <UploaderList
    v-model="imageList"
    :formData="{ guid: null, fileCategory: 1, code: 7 }"
    :fileType="'targetFacility'"
/>