caimei-authentic-manager/src/views/components/uploadImage.vue

<template>
  <div class="img-upload-box">
    <el-upload
      ref="upload"
      :action="action"
      :headers="headers"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeUpload"
      :limit="1"
      :accept="accept"
      :auto-upload="true"
      :on-success="success"
      :on-remove="remove"
      :file-list="fileList"
    >
      <!-- :class="{hidden:(hasUpload && fileList===[]) || !hasUpload}" -->
      <div slot="tip" class="el-upload__tip">建议尺寸：{{ tipTitle }}</div>
      <i class="el-icon-picture-outline" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
// import { uploadImage } from '@/api/upload'
import { mapGetters } from 'vuex'
export default {
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    tipTitle: {
      type: String,
      default: '128px*88px'
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 文件上传请求接口
      action: process.env.VUE_APP_UPLOAD_API + '/upload/image',
      headers: {
        'X-Token': ''
      },
      accept: '.jpg,.png,.gif'
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.headers['X-Token'] = this.token
  },
  methods: {
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 图片上传成功
    success(response, file, fileList) {
      this.$emit('success', response)
    },
    // 图片上传失败
    error(err, file, fileList) {
      this.$emit('error', err, file, fileList)
    },
    // 图片上传之前的钩子
    beforeUpload(file) {
      const size = file.size
      if (size > 1024 * 1000) {
        this.$message.warning('文件上传大小超出限制(≤1MB)')
        return false
      }
    },
    remove() {
      this.$emit('remove')
    }
  }
}
</script>

<style lang="scss">
.img-upload-box{
  width:150px;
  height:180px;
  overflow: hidden
}
.img-upload-box>div{
  white-space: nowrap;
}
.img-upload-box .el-upload-list{
  height: 150px;
  display: inline-block;
}
</style>