Encapsulation of el upload - display an image after uploading

Wed, 17 Aug 2022 18:01:47 +0000

Prerequisite: You have installed Vue.js(^2.5.2) and ElementUI(^2.15.8) in your project.

Creating our own custom components

Get started with Basic HTML

<template>
<div>
    <el-upload 
      :action="ossUploadUrl" 
      :data="dataObj" 
      list-type="picture-card" 
      :file-list="fileList" 
      :before-upload="beforeUpload" 
      :on-remove="handleRemove" 
      :on-success="handleUploadSuccess" 
      :on-preview="handlePreview" 
      :limit="maxCount" 
      accept=".jpg, .jpeg, .png, .gif, .mp4" 
      :on-exceed="handleExceed">
        <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
</div>
</template>

Defining data and props

<script>
import { policy } from '@/api/oss'

export default {
    name: 'multiPicUpload',
    props: {
        // images array from parent template
        value: Array,
        maxCount: {
            type: Number,
            default: 5
        }
    },
    data() {
        return {
            dataObj: {
                policy: '',
                signature: '',
                key: '',
                ossaccessKeyId: '',
                dir: '',
                host: ''
            },
            dialogVisible: false,
            dialogImageUrl: null,
            ossUploadUrl: 'https://xxxxx.aliyun.com', //replace it with your back-end service
        };
    },

Compute the array of uploaded images

    computed: {
        fileList() {
            let fileList = [];
            if (this.value === undefined) return;
            for (let i = 0; i < this.value.length; i++) {
                fileList.push({
                    url: this.value[i]
                });
            }
            return fileList;
        }
    },

Required Methods in doc

    methods: {
        emitInput(fileList) {
            let arr = [];
            for (let i = 0; i < fileList.length; i++) {
                arr.push(fileList[i].url);
            }
            this.$emit('input', arr)
        },
                                                
        handleRemove(file, fileList) {
            this.emitInput(fileList);
        },
                                               
        handlePreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
                                                
        beforeUpload(file) {

            // Tell if the image is larger than 5M
            const isLt5M = file.size / 1024 / 1024 < 5;
            // const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
            // Identify the type of the image
            // const isJpg = file.type ==  'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png' || file.type == 'image/gif'
            // if(!isJpg){
            //     this.$message.error('You can only upload these image file types: jpg, jpeg, png, gif！')
            //     return false
            // }

            if (!isLt5M) {
                this.$message.error('The size of the uploaded image cannot exceed 5MB!');
                return false
            }

            let _self = this;

            return new Promise((resolve, reject) => {
                // policy() is a GET request, not POST
                policy().then(response => {
                    _self.dataObj.policy = response.data.policy;
                    _self.dataObj.signature = response.data.signature;
                    _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
                    _self.dataObj.key = response.data.dir + '/${filename}';
                    _self.dataObj.dir = response.data.dir;
                    _self.dataObj.host = response.data.host;
                    resolve(true)
                }).catch(err => {
                    console.log(err)
                    reject(false)
                })
            })
        },
        handleUploadSuccess(response, file, fileArr) {
            console.log('Upload successful!')
            let url = this.dataObj.host + '/' + this.dataObj.dir + '/' + fileArr.name;
            // Get the image url
            this.fileList.push({
                name: fileArr.name,
                url: url
            });
            this.emitInput(this.fileList);

        },
        handleExceed(file, fileList) {
            this.$message({
                message: 'Maximum of' + this.maxCount + 'images can be uploaded',
                type: 'warning',
                duration: 1000
            });
        },
    }
}
</script>

<style>
</style>

how to use this component

<template>
  <div>
    <el-form-item label="device photos">
      <multipic-upload v-model="selectDevicePicFiles"></multipic-upload>
    </el-form-item>
  </div>
</template>
<script>
import MultipicUpload from "@/components/Upload/multipicUpload";
export default {
  components: { MultipicUpload },
  computed: {
    selectDevicePicFiles: {
      get: function () {
        return this.detailDevice.picUrl;
      },
      set: function (newValue) {
        console.log("get a newValue", newValue);
        if (newValue == null || newValue.length === 0) {
          this.detailDevice.picUrl = [];
        } else {
          if (newValue.length > 0) {
            this.detailDevice.picUrl = newValue;
          }
        }
      },
    },
  },
};
</script>

Others

// some utils/methods in case you want to see it

// api/oss.js
import request from '@/utils/request'
export function policy() {
  return request({
    url:'/zm-admin/aliyun/oss/policy',
    method:'get',
  })
}

// utils/request.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 15000
})
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = getToken() // token
  }
  return config
}, error => {
  console.log(error) // for debug
  Promise.reject(error)
})
export default service

// auth.js
import Cookies from 'js-cookie'
const TokenKey = 'xxxxxToken'
export function getToken() {
  return Cookies.get(TokenKey)
}

Reference

ElementUI Docs

En on Neptoo's Blog

Encapsulation of el upload - display an image after uploading

Creating our own custom components

Get started with Basic HTML

Defining data and props

Compute the array of uploaded images

Required Methods in doc

how to use this component

Others

Reference