基於vue-elementui的圖片文件上傳的高階使用分享

前言

要求：
一、圖片上傳支持多圖片上傳 +多瀏覽器圖片格式判斷；
二、多圖片同時ajax上傳 經過防併發設置防止可能出現的覆蓋；
三、圖片實時上傳後支持 在新窗口中打開查看；

使用

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>

校長紅包福利