Vue Element UI 圖片上傳

ElementUI upload組件上傳圖片，多看看文檔參數，基本沒什么難度，我總結以下個人的需求。文檔里面其實都有說明，我這邊給出使用例子，方便他人。

參照ElementUI官網: https://element.eleme.cn/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan

• 上傳權限驗證 (需要heades里面加上token)
• 預覽上傳圖片(這個其實就很簡單了, 我沒仔細看文檔)
  

上傳headers添加token

由於我接口限制了headers token驗證，所以上傳得添加， 文檔里面有說明一個 headers屬性, 所以在計算屬性添加

 <el-upload
:headers="headers"
>
xxxx
 </el-upload>
  xxx
  computed:{
      headers() {
        // 上傳圖片添加請求頭header
        return {
          'token': getToken() // 從本地獲取token就行
        }
      }
}

上傳回調處理

首先我上傳回調json數據是一下格式

{
      "code": 200,
      "message": "success",
      "data": {
            "image": "xxxx"
      }
}

上傳回調函數有兩個默認參數， 第一個是請求響應，第二個是圖片文件信息。

 <el-upload
:on-success="handleAvatarSuccess"
>
xxxx
 </el-upload>
  xxx
 methods:{
      handleAvatarSuccess(res, file) {
       // 處理上傳圖標
        if (res.code === 200) {
          this.icon_url = res.data.image
        } else {
          this.$message.error(`圖片上傳失敗:${res.message}`)
        }
      }
}

完整代碼

<template>
 <el-upload
          action="http://127.0.0.1:8010/api/mall/v1/admin/utils/upload/file/"    //上傳的地址
          :headers="headers"    // 上傳的請求頭
          list-type="picture-card"    // 顯示類型卡片
          :file-list="fileArr"    // 顯示的圖片
          :limit="1"    // 限制上傳圖片
          :on-success="handleAvatarSuccess"    // 回調請求處理
        >
         <i class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">限制上傳一張, 只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
</template>

<script>
  import { getToken } from '@/utils/auth'
  export default {
    name: 'CategoryView',
    data() {
      return {
            icon_url: ""  // 默認url
      },
      computed:{
      headers() {
        // 上傳圖片添加請求頭header
        return {
          'token': getToken() // 從本地獲取token就行
        }
      },    
      fileArr() {
        // 上傳圖片 顯示默認圖片
        return this.form.icon_url ? [{ url: this.form.icon_url }] : []
        }
     },
      methods: {
           handleAvatarSuccess(res, file) {
                if (res.code === 200) {
                       this.icon_url = res.data.image
            } else {
               this.$message.error(`圖片上傳失敗:${res.message}`)
            }
           }
      }
 }
</script>

在tab表格中的完整代碼

以上代碼還不算特別完整，tab表格代碼見個人博客