channels_web/src/components/upload.vue

<template>
  <div>
    <div class="flex">
      <el-upload
        class="avatar-uploader"
        list-type="picture-card"
        :action="action"
        :on-remove="handleRemove"
        :accept="acceptType"
        :headers="myHeaders"
        :multiple="limitNum == 1?false:true"
        :limit='limitNum'
        :on-exceed="handleExceed"
        :on-change='handleChangeUpload'
        :on-success="handleSuccess"
        :on-preview="handlePictureCardPreview"
        :file-list="fileList"
        :show-file-list="acceptType =='.jpg, .jpeg, .png'?false:true"
        :disabled="disabled"
        :auto-upload="autoUpload" 
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <span class="tip" v-if="warning">{{warning}}</span>
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
    > 
      <img :src="dialogImageUrl" style="width:100%;"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
  export default {
    name: "index",
    components: {
    },
    props: {
      warning: {
        type: String,
        default: ''
      },
      file: {
        type: Array,
        default: () => []
      },
      disabled: {
        type: Boolean,
        default: false
      },
      acceptType: {
        type: String,
        default: ''
      },
      limitNum: {
        type: Number,
        default: 3
      },
      uploadUrl: {
        type: String,
        default: '/file/img/upload'
      },
      autoUpload: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        fileList: [],
        dialogVisible: false,
        imgUrl: '',
        baseUrl: '',
        dialogImageUrl:''
      };
    },
    computed: {
      action(){
        return global_config.BASE_URL + this.uploadUrl;
      },
      myHeaders(){
        return {Authorization: 'Bearer ' + store.getters.getToken, 'X-Token':store.getters.getToken};
      }
    },
    created() {
      this.fileList = this.file;
    },
    methods: {
      // 手动上传
      handleChangeUpload(fileData){
        if(!this.autoUpload){
          let event = event || window.event;
          let file = event.target.files[0];
          let reader = new FileReader();
          let that = this;
          reader.onload = function(e) {
            that.baseUrl = e.target.result;
            that.$emit('changeUpload', fileData, that.baseUrl);
          }
          reader.readAsDataURL(file);
        }
      },
      // 上传成功
      handleSuccess(response, file, fileList){
        this.fileList.push({
          name: response.fileName,
          url: response.message
        });
      },
      // 删除
      handleRemove(file, fileList) {
        this.fileList = fileList;
      },
      // 上传超过限制
      handleExceed(files, fileList) {
        if(fileList.length >= this.limitNum){
          this.$message.closeAll();
          this.$message.warning(`当前限制选择${this.limitNum}个文件`);
        }
      },
      handlePictureCardPreview(file){
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      view(index){
        this.dialogVisible = true;
        this.imgUrl = this.fileList[index].url;
      },
      del(index){
        this.fileList.splice(index, 1);
      }
    }
  };
</script>
<style lang="less" scoped>
  .file-list{
    margin-right: 5px;
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    &:hover{
      .mask{
        opacity: 1;
      }
    }
    .mask{
      opacity: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 6px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      i{
        cursor:pointer;
        margin: 0 10px;
      }
    }
    img{
      max-width: 150px;
      max-height: 150px;
      display: block;
    }
  }
  // .avatar-uploader{
  //   line-height: initial;
  //   width: 150px;
  // }
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  .tip{
    color:#f56c6c;
    font-size:14px;
  }
</style>