Element ：upload组件实例

Element : upload

设置上传地址、请求头（token/Content-Type）、上传文件名称
复制代码

upload组件实现

<template>
  <el-upload
    class="avatar-uploader"
    # 设置图像上传地址
    :action="uploadUrl"
    # 设置请求头
    :headers="headers"
    # 设置上传的文件字段名（根据接口参数设置）
    name="fileName"
    # 上传文件前的处理函数
    :before-upload="beforeAvatarUpload"
    # 上传成功后的回调函数
    :on-success="handleAvatarSuccess"
    :show-file-list="false">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
复制代码

<script>
import { baseURL, KEYS } from '@/config'
import { getStorageItem } from '@/utils'
export default {
  data() {
    return {
        imageUrl: ''
    }
  },
  computed: {
    // 设置请求头
    headers() {
      return {
        // 设置Content-Type类型为multipart/form-data
        'ContentType': 'multipart/form-data'
        // 设置token
        'token': getStorageItem(KEYS.token),
      }
    },
    // 设置上传地址
    uploadUrl() {
      // baseURL是服务器的路径，也是axios的基本路径
      return baseURL + '/account/headImg'
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isImg = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isImg) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImg && isLt2M
    },
    handleAvatarSuccess(res, file) {
      // res是响应返回的数据
      // 用Math.random()去除图片缓存，保证图片的实时刷新
      this.imageUrl = res.data + '?' + Math.random()
    }
  }
}
</script>
复制代码