element ui上传图片到七牛

<template>
  <div  v-loading.lock="loading" element-loading-text="拼命上传中...">
    <el-upload 
    v-if="canDelete"
    ref="upload"
    action="https://upload.qbox.me" 
    :show-file-list="showFileList" 
    :data="dataObj" 
    drag 
    :multiple="basicPackDefault.multiple"
    :before-upload="beforeUpload" 
    :on-success="uploadSuccess"
    :on-change="onChange"
    :auto-upload="true"
    :accept="basicPack.accept"
    :on-error="onError"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击选择图片</em></div>
    </el-upload>
    <el-button v-if="false" style="    margin-left: 10px;position: absolute;left: 230px;top: 30px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> 
    <el-progress v-if="progress" :percentage="percentage" :status="status"></el-progress>
    <ul  class="el-upload-list el-upload-list--picture" :id="id" >
       <li  v-if="qiniuImage.image_uri&&qiniuImage.image_uri.length<=0">暂无图片列表</li>
       <template  v-for="(item, index) in qiniuImage.image_uri" >
          <li class="el-upload-list__item is-success"  v-if="item != '' " style="width:16%;margin-right:5px;display:inline-block;">
             <img :src="item" alt="" class="el-upload-list__item-thumbnail"  @click="Viewer" style="cursor:pointer">
             <template v-if="canDelete">
               <label  class="el-upload-list__item-status-label">
                       <i class="el-icon-upload-success el-icon-check"></i>
                     </label>
                     <i  class="el-icon-close" @click="delImg(index)"></i>
             </template>
          </li>
        </template>
    </ul>
  </div>
</template>
<script>


import { getToken } from '@/api/qiniu'
import { Message } from 'element-ui'
import store from '@/store'
import qiNiuPrefix from 'config/qiNiuPrefix.js'
import Viewer from "static/viewer/viewer.js"
//import $ from 'jquery'


// 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
var timer;
var viewer;
export default{
   mounted(){
    if(typeof(this.qiniuImage)=='string' ){
       this.qiniuImage={};
       this.qiniuImage.image_uri=this.qiniuImage.split(',')
    }
  },
  /*data(){     
    return{
      imageArr:[]
    }
  },*/  
  props:["qiniuImage",'packJson','canDelete','id'],
  computed: {
    basicPack: {
      get: function () {
        if(this.packJson){
          if(this.packJson.maxLength){
            this.basicPackDefault.maxLength=this.packJson.maxLength;
          }
          if(this.packJson.size){
            this.basicPackDefault.size=this.packJson.size;
          }
          if(this.packJson.accept){
            this.basicPackDefault.accept=this.packJson.accept;
          }
        }
        return this.basicPackDefault
      },
      set: function (v) {
        
      }
    }
  },
  data() { 
    return {
      dataObj: { token: '',key:"" },
      showFileList:false,
      basicPackDefault:{
        maxLength:9,   //最大图片数量
        multiple:true, //可否上传多张
        accept:"image/gif,image/jpeg,image/jpg,image/png",
        size:4
      },
      maxLengthPass:"false",
      //进度条参数
      progress:false,
      percentage:0,
      status:"",


      count:0,
      loading:false
      
    }
  },
  methods: {
    
    submitUpload() {
        this.$refs.upload.submit();
    },
    onError(){
      this.loading=false;
      getToken().then(response => { 
        const token = response.uptoken
        store.dispatch('SetQiNiuToken',token)
        //commit('SET_QINIUTOKEN', token)
        _self._data.dataObj.token = token 
        resolve(true)
      }).catch(err => {
        console.log(err)
        reject(false)
      })
      this.$message.error('哎呀,网络君打了下盹，请重新上传!');
    },
    onChange(file, fileList){
      if(file.status=="ready"){
        if(this.qiniuImage.image_uri.length+fileList.length>(this.basicPack.maxLength)){//fileList.length+
            this.maxLengthPass=false;
        }else{
            this.maxLengthPass=true;
        }
      }
    },
    beforeUpload(response, file, fileList) {
      //增加key可以上传相同的图片名称到七牛
      this.dataObj.key=Date.parse(new Date());
      this.loading=true;
      if(this.maxLengthPass){
          const isLtM = response.size / 1024 / 1024 < (this.basicPack.size);//图片大小
          if (!isLtM) {
            this.$message.error('上传图片大小不能超过'+(this.basicPack.size)+'MB!');
            this.loading=false;
            return isLtM
          }
          else{
            const _self = this
            return new Promise((resolve, reject) => {
              if(!store.getters.qiNiuToken){
                  getToken().then(response => { 
                    const token = response.uptoken
                    store.dispatch('SetQiNiuToken',token)
                    //commit('SET_QINIUTOKEN', token)
                    _self._data.dataObj.token = token 
                    resolve(true)
                  }).catch(err => {
                    console.log(err)
                    reject(false)
                  })
               }else{
                _self._data.dataObj.token = store.getters.qiNiuToken
                resolve(true)
               }
            })
          }
      }else{
          this.loading=false;
          this.$message.error('最多上传'+(this.basicPack.maxLength)+'张图片!');
          return false
      }
      
    },
    uploadSuccess(response, file, fileList){
      this.count++;
      this.qiniuImage.image_uri.push(qiNiuPrefix+response.key);
      if(this.count==fileList.length){
        this.count=0;
        this.$refs.upload.uploadFiles=[];
      }
      //this.$message.success('上传成功');
      this.$nextTick(()=>{
        if(this.count===0){
          this.loading=false;
        }
      })
      
    }
    //图片预览部分的js
    ,Viewer(){
      //document.getElementsByClassName('viewer-container')[0]
      if($('.viewer-container').length>0){
        var zIndex=document.getElementsByClassName('viewer-container')[0].style['z-index'];
        $('.viewer-close').click();


        //this.$message.warning('请先关闭上一层图片查看！');
        //return;
      };
      viewer=new Viewer(document.getElementById(this.id),{  
        fullscreen:false,
        hide: function (){  
          viewer.update();
          viewer.destroy()
          },
          show:function(){
            viewer.update();
          }
        });
      setTimeout(()=>{
        if(zIndex==-1){
          if(document.interchange){
            document.interchange();
          }
        }
      },1000)
    },
    delImg(index){
      var imageUrl = this.qiniuImage.image_uri;
      if ( imageUrl.length > 0) { 
        imageUrl.splice(index,1);
        this.$refs.upload
        this.$message({
              type: 'success',
              message: '删除成功!'
          });
      }
    }
  }
}


/**/
</script>
<style scoped  >
  @import './../../../static/viewer/viewer.styl';
</style>
<style>
  .el-upload-list--text{display: none!important;}
</style>

 

欢迎加群交流：897724635  更多视频教程资源分享给大家