vue中基于element-ui自定义的文件上传组件

<template>
  <div class="upload">
    <div class="file-list">
      <div v-if="multiple === true" class="file-item">
        <div v-for="(item,index) in value" :key="index" class="file-item_item">
          <span v-if="fileType==='image'">
            <el-image v-if="item" :style="{width: width,height: height}" class="image-preview" :src="item" :preview-src-list="[item]" />
            <el-button type="text" size="mini" @click="removeFile(index)">删除</el-button>
          </span>
          <span v-if="fileType==='file'">
            <el-input :value="item" autocomplete="off" />
          </span>

        </div>
      </div>
      <div v-else class="file-item">
        <div v-if="value" class="file-item_item">

          <span v-if="fileType==='image'">
            <el-image class="image-preview" :style="{width: width,height: height}" :src="value" :preview-src-list="[value]" />
            <el-button type="text" size="mini" @click="removeFile()">删除</el-button>
          </span>

          <span v-if="fileType==='file'">
            {{ value }}
          </span>

        </div>
      </div>

      <div v-if="fileType==='image'" class="default" :style="{width: width,height: height}">
        <el-upload
          class="multi-image"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :headers="headers"
          :multiple="multiple"
        >
          <i class="el-icon-plus avatar-uploader-icon" :style="{'font-size':fontSize}" />
        </el-upload>
      </div>

      <div v-if="fileType==='file'">
        <el-upload
          class="multi-image"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :headers="headers"
          :multiple="multiple"
        >
          <el-button type="primary">上传</el-button>
        </el-upload>

      </div>
    </div>

  </div>
</template>

<script>
import config from '@/utils/config'
import { getToken } from '@/utils/auth'

export default {
  name: 'UploadFile',
  components: { },
  model: {
    prop: 'value',
    event: 'success'
  },
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    fileType: {
      type: String,
      default: 'image'
    },
    value: {
      type: [String, Array],
      default: ''
    },
    width: {
      type: String,
      default: '80px'
    },
    height: {
      type: String,
      default: '80px'
    },
    fontSize: {
      type: String,
      default: '28px'
    }
  },
  data() {
    const { fromType, apiVersion, appVersion, uploadUrl } = config
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + uploadUrl,
      headers: {
        'XX-Token': `${getToken()}`,
        'XX-Api-Version': apiVersion,
        'XX-App-Version': appVersion,
        'XX-From-Type': fromType
      },
      urls: [],
      url: ''

    }
  },
  watch: {

  },
  methods: {

    handleSuccess(res, file) {
      if (res.code !== 200) {
        this.$message({
          type: 'error',
          message: res.msg
        })
        return
      }
      if (this.multiple === true) {
        this.urls.push(res.data.url)
        this.$emit('success', this.urls)
      } else {
        this.url = res.data.url
        this.$emit('success', this.url)
      }
    },
    beforeUpload(file) {

    },

    removeFile(index = 0) {
      if (this.multiple === true) {
        this.$delete(this.urls, index)
        this.$emit('success', this.urls)
      } else {
        this.url = ''
        this.$emit('success', this.url)
      }
    }

  }
}
</script>

<style scoped lang="scss">
.pagination-container{
  padding: 0;
}
.file-list{
  display: flex;
  flex-direction: row;
  width: 100%;
  .file-item{
    display: flex;
    flex-direction: row;
    .file-item_item span{
      display: flex;
      flex-direction: column;
      margin-right: 10px;
    }
  }

  .image-preview{
    //width: 80px;
    //height: 80px;
    margin-bottom: 10px;
  }
  .default{
    //width: 80px;
    //height: 80px;
    border: 1px dashed #dddddd;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    .el-icon-plus {
      //font-size: 28px;
      color: #8c939d;
    }
    &:hover{
      border: 1px dashed red;
    }
  }
}
.uploadDialog{
  .header{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    .upload{
      margin: 0 10px;
    }
  }
  .picture-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .picture-item{
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      margin-bottom: 10px;
      cursor: pointer;

      .image-preview{
        width: 100px;
        height: 100px;
        padding: 2px;
        &.active{
          border: 2px solid green ;
        }
      }
    }
  }

}
</style>

效果：