上传多图组件

children117cl

2021-05-27 ccad616880f2f6e21adf18f6f4e28de9930ff05e

上传多图组件

 src/components_simple/UploadMultipleImg.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div>
    <!-- 上传图片组件(多图) -->
    <el-upload
      ref="refUploadImg"
      :accept="accept"
      :auto-upload="false"
      list-type="picture-card"
      :class="{disabled:uploadDisabled}"
      action="#"
      :limit="limit"
      :file-list="uploadImgs"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
      :http-request="uploadImg"
      :on-preview="uploadPreview"
      :before-upload="beforeUploadImg"
      size="mini"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadImgs',
    event: 'change'
  },
  props: {
    uploadImgs: {
      type: Array,
      default: () => {
        return []
      }
    },
    accept: {
      type: String,
      default: () => {
        return 'image/jpeg,image/jpg,image/gif,image/png'
      }
    },
    limit: {
      type: Number,
      default: 9
    }
  },

  data() {
    return {
      callback: null
    }
  },
  computed: {
    uploadDisabled() {
      return this.uploadImgs.length >= this.limit
    }
  },

  methods: {
    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      const isTooLarge = file.size / 1024 / 1024 > 4
      let flag = true
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
        flag = false
      } else if (isTooLarge) {
        this.$message.error('请勿上传大于4MB的图片')
        flag = false
      }
      return flag
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 执行上传商品图
    runUploadImg(suc_cb) {
      console.log('runUploadImg!!!!!')
      if (this.checkNeedUpload(this.uploadImgs)) {
        this.callback = suc_cb
        this.$refs.refUploadImg.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传商品图
    uploadImg(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload?folderCode=IMG',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图片成功')

        // 根据uid 替换掉未上传的图片
        var uploadImgs = this.uploadImgs
        uploadImgs.forEach((o, i) => {
          if (o.uid === res.file.uid) uploadImgs[i] = { url: inf.imgUrl, status: 'success' }
        })
        this.uploadImgs = JSON.parse(JSON.stringify(uploadImgs))

        // 触发change时间激活v-model
        this.$emit('change', uploadImgs)

        console.log('上传图片结束')

        // 上传结束
        if (!this.checkNeedUpload(this.uploadImgs)) {
          console.log('上传轮播图结束')
          this.callback && this.callback(this.uploadImgs)
        }
      })
    }
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.el-upload-list--picture-card{
  line-height: 1;
}
.el-upload-list--picture-card .el-upload-list__item{
  margin-bottom: 0
}
</style>