vue上传（兼容IE9）

最新推荐文章于 2024-09-13 21:46:56 发布

zbao007

最新推荐文章于 2024-09-13 21:46:56 发布

阅读量1w

点赞数

分类专栏： vue 文章标签： vue 上传兼容 IE

本文链接：https://blog.csdn.net/z719725611/article/details/79238577

版权

项目中vue文件上传功能原来使用的是element ui组件，头像上传裁剪使用的是vue-image-crop-upload，但是这两个组件只支持到IE10+，现在项目要求兼容IE9，这两个组件就没办法实现。

我基于Web Uploader封装了vue上传功能，Web Uploader是一个简单的以HTML5为主，FLASH为辅的上传组件，IE10以下可以使用FLASH上传。废话不多说，直接上码。

我将文件放在components下：

其中index.vue为封装的一层，Uploader.swf和webuploader.js可以在webupload官网下载

index.vue:

<template>
    <div class="_upload">
    </div>
</template>


<script>
  import 'jquery';
  import './webuploader';
  import swgimg from './Uploader.swf';

  export default {
    props: {
      // 上传按钮ID
      upload_button: {
        type: String,
        default: '._upload'
      },
      // 上传地址
      cdnUrl: {
        type: String,
        default: ''
      },
      // 上传最大数量 默认为100
      fileNumLimit: {
        type: Number,
        default: 100
      },
      // 大小限制 默认2M
      fileSingleSizeLimit: {
        type: Number,
        default: 2048000
      },
      //上传token等参数
      formData: {
        type: Object,
        default: null
      },
      imageUrl: {
        type: String,
        default: ''
      },
      accept: {
        type: Object,
        default: null
      },
      keyGenerator: {
        type: Function,
        default: function (file) {
          const currentTime = new Date().getTime();
          const key = currentTime + "." + file.name;
          return key;
        }
      }
    },
    data() {
      return {
      };
    },
    mounted() {
      this.initWebUpload();
    },
    methods: {
      initWebUpload() {
        var self = this