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>
複製代碼