基于vue-elementui的图片文件上传的高阶使用分享

前言

要求：
1、图片上传支持多图片上传 +多浏览器图片格式判断；
2、多图片同时ajax上传 通过防并发设置防止可能出现的覆盖；
3、图片实时上传后支持 在新窗口中打开查看；

使用

main.js

import Vue from 'vue';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

app.vue

注意：代码中是页面中存在for循环很多上传项，我为了省事直接复制粘贴的实现，如果单项上传 就不用考虑了

<template>
<el-container>
  <el-form-item v-for="(vv, vindex) in v" :key="vindex" :label="vv.c_name" :prop="vv.c_id">
    <el-upload
      class="upload-demo"
      name="multipartFile"
      :ref="'upload'+vv.c_id"
      :multiple="true"
      :accept="uploadAccept"
      :action="uploadUrl"
      :on-preview="uploadPreview"
      :on-success="(res,file,fileList)=>{return uploadSuccess(res,file, fileList, vv)}"
      :on-remove="(file,fileList)=>{return uploadRemove(file, fileList, vv)}"
      :before-upload="(file)=>{return beforeUpload(file, vv)}"
      :data="uploadData"
      :auto-upload="true"
      :limit="10"
      :on-exceed="uploadExceed"
      :disabled="!vv.isOpenUpload"
      :file-list="vm.picList">
      <el-button slot="trigger" size="small" type="primary" :loading="loading" :disabled="!vv.isOpenUpload">添加附件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件,且总数不超过10个</div>
    </el-upload>
  </el-form-item>
  <a :href="previewUrl" id="fileLink" target="_blank" style="display:none">下载</a>
</el-container>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      uploadAccept: "application/pdf,image/jpeg,image/png",//设置允许图片类型
      uploadUrl: "http://xxx.com/uploadApi",//配置ajax上传api
      uploadData: {
        par: 'xxxx',//额外多传递的参数
      },
      uploadTime: 0,//上传时间
      uploadTimeout: 0,//上传倒计时
      uploadNow: '',//当前上传项
      previewUrl: '',//预览项
    }
  },
  computed: {//实时计算
    loading(){
      return this.$store.state.loading;
    },
  },
  methods:{
    beforeUpload(file, vv){
      let vm = this;
      //解决火狐浏览器无法从标签选择上屏蔽上传项 
      if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'application/pdf'){
        vm.$message.error('只能上传jpg/png/pdf文件!');
        return false;
      }
      //有效解决一次选择多个图片并发出现上传后回执url存在相同覆盖
      let now = Date.now();
      if(vm.uploadNow != vv.c_id){
        vm.uploadNow = vv.c_id;
        vm.uploadTimeout = 0;
      }else{
        if(now-vm.uploadTime>1000){
          vm.uploadTimeout = 500;
        }else{
          vm.uploadTimeout += 1000;
        }
      }
      vm.uploadTime = now;
      return new Promise((resolve, reject) => {
        setTimeout(function(){
          vm.$store.dispatch('setLoading', true);
          resolve(true);
        },vm.uploadTimeout);
      });
    },
    //文件上传成功
    uploadSuccess(response, file, fileList, vv){
      let vm = this;
      let {code, result} = response;
      if(code == 200 && result){
        fileList.map(function(v){
          if(v.url == file.url){
            v.url = file.url = result;
          }
        });
        vv.reports = fileList;
      }
      //vuex loading false
      setTimeout(function(){
        vm.$store.dispatch('setLoading', false);
      },1000);
    },
    //文件超出
    uploadExceed(files, fileList) {
      this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //文件删除
    uploadRemove(file, fileList, vv){
      vv.reports = fileList;
    },
    //文件预览
    uploadPreview(file){
      let vm = this;
      vm.previewUrl = file.url;
      setTimeout(function(){
        document.getElementById('fileLink').click();
      },150);
    },
  },
}
</script>

校长红包福利