美文网首页
Vue Upload 兼容IE9

Vue Upload 兼容IE9

作者: ErHu丶 | 来源:发表于2020-04-14 20:28 被阅读0次

    el-upload 并不支持IE9环境, 于是自己简单封装了一个支持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: () => '上传'
        },
        // 上传之前的回调方法, 该方法可返回自定义的上传参数
        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({
            // 选完文件后,是否自动上传。
            auto: true,
            // swf文件路径, 此文件需要放到public文件夹下, 这样打包后dist中的vendor下有Uploader.swf文件
            // 注意文件路径是否跨域, 否则IE9下上传按钮将失效
            swf: window.location.href.split('/#')[0] + '/vendor/uploader.swf',
            // 文件接收服务端。
            server: '/YourPath',
            pick: {
              // 选择文件的按钮。可选。
              id: '#upload',
              // 是否支持多选
              multiple: false
            },
            // 允许类型, 必填, 否则IE9下上传按钮将失效
            accept: {
              title: 'Excel',
              extensions: 'xls,xlsx',
              mimeTypes: ''.XLS,.xlsx''
            },
            // 支持重复上传
            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) {
            // 移除默认的参数
            _this.showPercentage = true
            delete data.id
            delete data.name
            delete data.type
            delete data.lastModifiedDate
            delete data.size
            // jq 的扩展, 可以用其他方法代替
            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) {
              // 保存当前文件
              _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="//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 类型
    多看官方文档

    相关文章

      网友评论

          本文标题:Vue Upload 兼容IE9

          本文链接:https://www.haomeiwen.com/subject/azhxvhtx.html