基于element-ui图片封装组件

<template>
  <div>
    <el-button type="primary" size="mini" plain @click="uploadImg"
      >确认上传</el-button
    >
    <el-button type="primary" size="mini" plain @click="fileList = []"
      >取消</el-button
    >
    <el-upload
      action="#"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :on-error="handleUploadError"
      :on-change="handleChange"
      :limit="limit"
      :auto-upload="false"
      :multiple="true"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadPic } from '@/api/asset'
export default {
  name: 'UploadPic',
  props: {
    limit: {
      type: Number,
      default: 5
    },
    id: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [] // fileList数组
    }
  },
  methods: {
    handleRemove(file, fileList) {
      const picList = []
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].uid !== file.uid) {
          picList.push(this.fileList[i])
        }
      }
      this.fileList = picList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传失败
    handleUploadError() {
      this.$message({
        type: 'error',
        message: '上传失败'
      })
      this.loading.close()
    },
    handleChange(params) {
      const isLt2M = params.size / 1024 / 1024 < 2
      const isPNG = params.raw.type === 'image/png'
      const isJPEG = params.raw.type === 'image/jpeg'
      const isJPG = params.raw.type === 'image/jpg'
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return
      }
      if (isPNG || isJPEG || isJPG) {
        this.fileList.push(params)
      } else {
        this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
        return
      }
    },
    uploadImg() {
      if (this.fileList.length === 0) {
        this.$notify({
          title: '警告',
          type: 'warning',
          duration: 2000,
          message: '请选择图片进行上传'
        })
        return
      }
      const formData = new FormData()
      this.fileList.forEach(item => {
        formData.append('file', item.raw)
      })
      // 编辑，传入了ID
      if (this.id !== null) {
        formData.append('id', this.id)
      }
      this.loadingImg()
      uploadPic(formData).then(res => {
        if (res.code === 200) {
          this.fileList = []
          this.$message.success({
            message: '上传成功',
            duration: 2000
          })
          this.loading.close()
          this.$emit('funcPic', res.data.join(','))
        }
      })
        // eslint-disable-next-line handle-callback-err
        .catch(error => {
          this.$message.error('上传失败，请重新上传')
          this.loading.close()
        })
    },
    loadingImg() {
      this.loading = this.$loading({
        lock: true,
        text: '上传中...',
        background: 'rgba(0,0,0,0.7)'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// /* 推荐，实现简单 */
// /deep/.el-upload-list__item.is-ready {
//   display: none;
// }
</style>