el-upload 并不支持IE9環(huán)境, 于是自己簡單封裝了一個(gè)支持IE9的Upload組件(基于 Web Uploader)

效果:

上傳中

上傳完成

組件:

<template>
  <div class="upload-container">
    <div id="upload" style="display: inline-block;">
      <el-button size="small" :loading="showPercentage" type="primary">{{title}}</el-button>
    </div>
    <el-tag
      v-if="uploadFile"
      size="small"
      type="success"
      closable
      :title="uploadFile.name"
      @close="removeUploadFile">
      {{ uploadFile.name | nameFilter }}
    </el-tag>
    <el-progress
      v-if="showPercentage"
      style="display: inline-block; width: 100px;"
      :percentage="percentage"
      :color="uploadColorMethod">
    </el-progress>
  </div>
</template>

<script>
export default {
  name: 'UploadButton',
  filters: {
    nameFilter(name) {
      if (name.length > 20) return name.substring(0, 20) + '...'
      return name
    }
  },
  props: {
    title: {
      type: String,
      require: false,
      default: () => '上傳'
    },
    // 上傳之前的回調(diào)方法, 該方法可返回自定義的上傳參數(shù)
    beforeUpload: {
      type: Function,
      require: true,
      default: () => ''
    }
  },
  data() {
    return {
      showPercentage: false,
      percentage: 0,
      uploadFile: '',
      uploadData: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initUpload()
    })
  },
  methods: {
    initUpload() {
      const _this = this
      // eslint-disable-next-line
      const uploader = WebUploader.create({
        // 選完文件后，是否自動(dòng)上傳。
        auto: true,
        // swf文件路徑, 此文件需要放到public文件夾下, 這樣打包后dist中的vendor下有Uploader.swf文件
        // 注意文件路徑是否跨域, 否則IE9下上傳按鈕將失效
        swf: window.location.href.split('/#')[0] + '/vendor/uploader.swf',
        // 文件接收服務(wù)端。
        server: '/YourPath',
        pick: {
          // 選擇文件的按鈕。可選。
          id: '#upload',
          // 是否支持多選
          multiple: false
        },
        // 允許類型, 必填, 否則IE9下上傳按鈕將失效
        accept: {
          title: 'Excel',
          extensions: 'xls,xlsx',
          mimeTypes: ''.XLS,.xlsx''
        },
        // 支持重復(fù)上傳
        duplicate: true
      })
      uploader.on('beforeFileQueued', function (file) {
        if (_this.beforeUpload) {
          _this.beforeUpload(file).then(uploadData => {
            _this.uploadData = uploadData
            return true
          })
        } else {
          return true
        }
      })
      uploader.on('uploadBeforeSend', function (object, data, headers) {
        // 移除默認(rèn)的參數(shù)
        _this.showPercentage = true
        delete data.id
        delete data.name
        delete data.type
        delete data.lastModifiedDate
        delete data.size
        // jq 的擴(kuò)展, 可以用其他方法代替
        data = $.extend(data, _this.uploadData)
      })
      uploader.on('uploadProgress', function (file, percentage) {
        if (percentage === 1) percentage = 0.99
        _this.percentage = percentage * 100
      })
      uploader.on('uploadComplete', function(file) {
        _this.percentage = 100
      })
      uploader.on('uploadSuccess', function (file, res) {
        _this.showPercentage = false
        if (res.status === 200) {
          // 保存當(dāng)前文件
          _this.uploadFile = file
          _this.$message.success('上傳成功')
          _this.$emit('onSuccess', res, file)
        } else {
          _this.$emit('onError')
          _this.$message.error('上傳失?。? + res.message)
        }
      })
      uploader.on('uploadError', function (file) {
        _this.showPercentage = false
        _this.$message.error('上傳失敗')
        _this.$emit('onError')
      })
    },
    removeUploadFile() {
      this.uploadFile = ''
      this.$emit('onRemove')
    },
    uploadColorMethod(percentage) {
      if (percentage < 50) {
        return '#909399'
      } else if (percentage < 100) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    }
  }
}
</script>

<style type="css">
  .webuploader-container {
    position: relative;
    vertical-align: middle;
  }
  .webuploader-element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px,1px,1px,1px);
  }
  .webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
  }
</style>

使用:

<!-- index.html 添加 -->
<script src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.js"></script>

<upload-button
  title="名單上傳"
  class="upload-demo"
  :before-upload="beforeUpload"
  @onSuccess="onSuccess"
  @onRemove="onRemove"
  @onError="onError">
</upload-button>

methods: {
  beforeUpload(file) {
    const uploadData = {
      fileName: file.name
    }
    return new Promise((resolve) => {
      this.$nextTick(() => {
        resolve(uploadData)
      })
    })
  },
  onSuccess(response, file) {
  }
}

特殊說明:

1. .swf 文件的地址注意是否跨域, 否者IE上傳無效. 最好跟著打包文件走.

2. accept 要寫就把子屬性寫全, 否者IE上傳無效

3. Demo里的是Excel文件, 如需其他文件自行修改 accept 類型

多看官方文檔