【组件】element图片上传组件

Myth丶恋晨 2022-12-19 03:38 5阅读 0赞

> `前言`

封装的图片上传组件

<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" />