使用Webuploader封装Vue组件实现ie9的上传功能

ElementuI的上传组件不兼容ie9浏览器，但是项目还是要兼容到ie9，一番探索下来，发现了一个不错的上传插件Web Uploader，它的低版本浏览器上传是基于flash开发的，要求flash版本大于等于 11.4，实际开发遇到的各种问题可以参看这里，组件属性和el-upload基本一致

实现组件的核心代码在于监听插件的各种事件，在事件回掉函数处理对应逻辑，需要注意的是Uploader.swf的引用路径，实际路径需要根据自己的项目需求来调整,直接上代码

 <template>
  <div class="upload-wrapper">
    <div ref="uploadId">点击上传</div>
    <ul v-if="showFileList" class="el-upload-list el-upload-list--text">
      <li
      v-for="(item,i) in innerFileList"
      tabindex="0"
      :key="item.id?item.id : item.localId"
      class="el-upload-list__item"
      :style="readonly && i === 0 ?'margin-top:0px':''"
      >
        <slot name="textLabelSlot" :data="{item,index:i}"></slot>
        <a class="el-upload-list__item-name" @click="clickFileHandler(item)">
          <i class="el-icon-document"></i>
          {{item.name}}
        </a>
        <label class="el-upload-list__item-status-label">
          <i class="el-icon-upload-success el-icon-circle-check"></i>
        </label>
        <el-tooltip v-if="!readonly" content="点击删除文件">
          <div class="close-wrapper" @click="removeFile(item)">
            <i class="el-icon-close fr mr24"></i>
          </div>
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
const noop = function () {

};

export default {
  name: 'f-upload-plus',
  props: {
    uploadUrl: {
      type: String,
      default: '/basicdata/blobstorage/upload',
    },
    formData: {
      type: Object,
      default() {
        return {};
      },
    },
    action: {
      type: String,
      default: '',
    },
    headers: {
      type: Object,
      default() {
        return {
        };
      },
    },
    autoUpload: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: 'file',
    },
    fileList: {
      type: Array,
      default() {
        return [];
      },
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    accept: {
      type: String,
      default: '',
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    beforeRemove: {
      type: Function,
      default: noop,
    },
    onRemove: {
      type: Function,
      default: noop,
    },
    onPreview: {
      type: Function,
      default: noop,
    },
    onSuccess: {
      type: Function,
      default: noop,
    },
    onError: {
      type: Function,
      default: noop,
    },
    onExceed: {
      type: Function,
      default: noop,
    },
    limit: {
      type: Number,
      default: 3,
    },
    limitSize:{
      type:Number,
      default:null
    },
    totalLimitSize:{
       type:Number,
       default:null
    },
    duplicate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      innerFileList: [],
    };
  },
  computed: {},
  watch: {
    immediate: true,
    handler(val) {
      this.innerFileList = val;
    },
  },
  mounted() {
    this.initUploader();
  },
  beforeDestroy() {
    this.destroyUploader();
  },
  methods: {
    initUploader() {
      const that = this;
      this.uploader = WebUploader.create({
        swf: '/Uploader.swf',
        server: this.action,
        pick: {
          id: this.$refs.uploadId,
          multiple: this.multiple,
        },
        auto: this.autoUpload,
        resize: false,
        formData: this.formData,
        fileVal: this.name,
        accept: {
          extensions: this.accept,
        },
        duplicate: this.duplicate,
      });
      this.uploader.on('uploadBeforeSend', (object, data, headers) => {
        for (const d in that.formData) {
          data[d] = that.formData[d];
        }
        for (const h in that.headers) {
          headers[h] = that.headers[h];
        }
      });
    this.uploader.on('beforeFileQueued', file => {
        let totalSize = this.getFileTotalSize() + file.size
        let singleFileOversize = this.limitSize && file.size > this.limitSize
        let allFileOversize = this.totalLimitSize &&  this.totalLimitSize>totalSize 
        let overLimit = this.limit && this.innerFileList.length > this.limit
        if(singleFileOversize  || allFileOversize || ) return
        if(overLimit ){
            this.onExceed(file,this.innerFileList)
            return 
        }
        this.innerFileList.push(file)
        return file
      });
      this.uploader.on('uploadSuccess', (file, response) => {
        const res = JSON.parse(response._raw);
        const fileServerId = res.body.value;
        const uploadedFile = this.innerFileList.find(item => item.id === fileServerId);
        const uploadedFileIndex = this.innerFileList.findIndex(item => item.id === file.id);
        const newFile = {
          ...uploadedFile,
          fileServerId,
        };
        this.innerFileList.splice(uploadedFileIndex, 1, newFile);
        this.onSuccess(response, newFile, this.innerFileList);
      });
      this.uploader.on('uploadError', (file, reason) => {
        this.onError(reason, file, this.innerFileList);
        this.removeFile(file)
      });
      this.uploader.on("uploadFinished",()=>{
        this.uploader.reset()
      })
    },
    destroyUploader() {
      this.uploader.destroy();
      this.uploader = null;
    },
    submit() {
      this.uploader.upload();
    },
    getFiles() {
      return this.innerFileList
    },
    clickFileHandler(file) {
      this.onPreview(file, this.innerFileList);
    },
    removeFile(file) {
      if (!this.beforeRemove(file, this.innerFileList)) return;
      this.onRemove(file, this.innerFileList);
      }
    },
  },
};
</script>