Cacher is the code snippet organizer for pro developers

<template>
  <el-upload
    name="image"
    action="/upload"
    list-type="picture-card"
    :file-list="imageList"
    :before-upload="beforeUpload"
    :on-success="onUploadSuccess"
    :on-change="handleUploadChange"
    :http-request="uploadImg"
  >
    <i class="el-icon-plus"></i>
    <div class="el-upload__tip" slot="tip">只支持 jpg/png 文件，大小最大为 10M</div>
  </el-upload>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: 'singleUpload',
  props: {
    image: {
      type: Array,
      default: []
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageList: []
    }
  },
  created() {
    this.imageList.push(...this.image)
  },
  watch: {
    image(val) {
      this.imageList = val
    }
  },
  methods: {
    beforeUpload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
        return false
      }

      return true
    },
    onUploadSuccess(response, file, fileList) {
      this.$emit('input', response)
    },
    handleUploadChange(file, fileList) {
      this.imageList = fileList.slice(-1)
    },
    async uploadImg(item) {
      const OSS = require('ali-oss')
      const client = new OSS({
        region: 'oss-cn-hangzhou',
        endpoint: Cookies.get('msk_oss_end_point'),
        accessKeyId: Cookies.get('msk_oss_key'),
        accessKeySecret: Cookies.get('msk_oss_secret'),
        bucket: Cookies.get('msk_oss_bucket')
      })

      const filename = Date.parse(new Date())
      const fileExt = item.file.name.toLowerCase().split('.').splice(-1)
      const newFilename = filename + '-' + Math.floor(Math.random() * Math.floor(999999)) + '.' + fileExt[0]
      const result = await client.put(newFilename, item.file)

      return result.url
    }
  }
}
</script>

<style>
</style>