【组件】element图片上传组件

前言

封装的图片上传组件

<template>
  <div class="public-upload-image">
    <el-upload
      ref="uploadImage"
      action="https://upload.qiniup.com"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeUpload"
      :data="upToken"
      :file-list="fileList2"
      :on-exceed="handleExceed"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      list-type="picture"
      :limit="limit"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，建议不超过500kb</div>
    </el-upload>
  </div>
</template>
<script>
/**
 * 上传图片组件
 * @backType 返回类型 1=字符串/2=数组
 *           示例'https://www.baidu.com/Fh36U,www.baidu.com/Fl5ln'
 *           或者['www.baidu.com/Fh36','www.baidu.com/Fl5']
 * @value 回显值,与backType同类型
 * @limit 上传数量 默认1
 */
import { uploadToken } from 'service/upload'
export default {
  name: 'public-upload-image',
  data() {
    return {
      fileList2: [],
      upToken: null,
      imgRemoteUrl: null,
      domain: 'www.baidu.com'
    }
  },
  props: {
    backType: { type: Number, default: 1 },
    value: { type: String, default: '' },
    limit: { type: Number, default: 1 }
  },
  components: {},
  computed: {},
  created() {
  },
  onload() { },
  onShow() { },
  watch: {
    // 回显数据
    value(newVal, oldVal) {
      if (newVal && (newVal !== '' || newVal.length > 0)) {
        if (this.backType === 1) {
          let arr = newVal.split(',')
          this.fileList2 = []
          arr.forEach(item => {
            this.fileList2.push({ name: item, url: item })
          })
        } else if (this.backType === 2) {
          this.fileList2 = []
          newVal.forEach(item => {
            this.fileList2.push({ name: item, url: item })
          })
        }
      } else {
        this.$refs['uploadImage'].clearFiles()
      }
    }
  },
  methods: {
    // 设置返回数据
    setBackData(list) {
      debugger
      let urls
      if (list && list.length > 0) {
        if (this.backType === 1) {
          urls = ''
          list.forEach(item => {
            urls += item.url + ','
          })
          urls = urls.slice(0, urls.length - 1)
        } else if (this.backType === 2) {
          urls = []
          list.forEach(item => {
            urls.push(item.url)
          })
        }
      } else {
        urls = null
      }
      return urls
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.fileList2 = fileList
      this.$emit('remove', this.setBackData(this.fileList2))
    },
    // 复制地址
    handlePreview(file) {
      // 创建'虚拟'DOM
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.setAttribute('value', file.url)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$message({
          type: 'success',
          message: '当前图片地址复制成功!'
        })
      }
      // 删除虚拟DOM
      document.body.removeChild(input)
    },
    // 上传成功
    handleAvatarSuccess(res, file, fileList) {
      debugger
      this.imgRemoteUrl = this.domain + res.key
      this.fileList2.push({
        name: this.imgRemoteUrl,
        url: this.imgRemoteUrl
      })
      this.$emit('success', this.setBackData(this.fileList2))
    },
    // 文件超出
    handleExceed(files, fileList) {
      if (this.fileList2.length === this.limit) {
        this.$message.warning(`当前限制上传图片个数：${fileList.length}`)
      }
    },
    // 上传之前
    beforeUpload(file) {
      if (!this.upToken || this.upToken === '') {
        return this._getToken()
      }
    },
    // 获取token 1=私有附件/2=公开附件
    _getToken(type = 2) {
      return uploadToken(type).then(res => {
        console.log(res.resdata.uptoken)
        this.upToken = {
          token: res.resdata.uptoken
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>

调用

ps：我已经把它注册为全局组件，所以不需要再引用

<public-upload-image
  @success="(val)=>{form.resource=val}"
  @remove="(val)=>{form.resource=val}"
  :value="form.resource"
/>