關於vue-element-admin的采坑記錄-upload組件圖片上傳問題

個人博客里部分內容用到了圖片上傳

那就需要用到vue-element-admin中的upload組件

首先我們需要在需要到圖片上傳的vue文件里引入upload組件 並使用標簽的形式使用該組件 通過v-model綁定image屬性

<template>
  <div class="createPost-container">
    <Upload v-model="image"/>
  </div>
</template> 
​
<script>
    import Upload from '@/components/Upload/SingleImage3'
    
    export default {
        name: 'EssayDetail',
        components: {Upload},
        data() {
            image:''
        },
    }
</script>

　　

​

這樣組件就能夠為我們做上傳圖片的功能

這樣的圖片上傳使用的是upload默認的上傳，而它內部做的事情則是將我們上傳的文件轉為image base64編碼

返回的結果可能是

data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzU4LjI3LjEwMAD/2wBDAAgCAgICAgICAgICAgMDAwMDAwMDAwMDAwMDAwMEBAQDAwMDAwMDBAQEBAQEBAQEBAQEBAUFBQYGBQUHBwcICAr/xAD9AAEAAgMBAQEAAAAAAAAAAAAAAgEGBAMFBwgBAQEBAQEBAQEAAAAAAAAAAAABAgMEBQYHEAABAwMCAwUEBQYJBAoIDBcBAAIDBAUREgYhBzFBYVEIEyKBFHEyFaGR8DMjwUKxUlNykuHRYgkkFoIXVPElQ6JVpLLSNNQYtHRWczU34pVElNODY+Q2ZrV1J9W25cTFw8KT..........................(后面省略1萬個字符)

　　

或者更長的Base64編碼

然后再將這么長的一條編碼存入到數據庫，很顯然這么長的編碼已經超出了預算 雖然數據庫字段啊可以用varchar、text、longtext這樣的類型但早已跟我們預期的不符，如果將這么長的編碼存入到數據庫很顯然影響查詢效率

那唯一的方式就是通過upload這個組件的源碼進行修改

以上面引入的Upload/SingleImage3為例 打開SingleImage3.vue文件

<template>
  <div class="upload-container">
    <el-upload
      :data="dataObj"
      :multiple="false"
      :show-file-list="false"
      :on-success="handleImageSuccess"
      class="image-uploader"
      drag
      action="https://httpbin.org/post"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        將文件拖到此處，或<em>點擊上傳</em>
      </div>
    </el-upload>
    <div class="image-preview image-app-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
          <i class="el-icon-delete" @click="rmImage" />
        </div>
      </div>
    </div>
    <div class="image-preview">
      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
        <img :src="imageUrl">
        <div class="image-preview-action">
          <i class="el-icon-delete" @click="rmImage" />
        </div>
      </div>
    </div>
  </div>
</template>
通過element-ui的官方文檔閱讀可知action="https://httpbin.org/post" 這個屬性,這是圖片的上傳地址，並綁定了文件上傳成功時的鈎子 :on-success="handleImageSuccess"

接着查看handleImageSuccess這個方法

export default {
  name: 'SingleImageUpload3',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempUrl: '',
      dataObj: { token: '', key: '' }
    }
  },
  computed: {
    imageUrl() {
      return this.value
    }
  },
  methods: {
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess(file) {
      this.emitInput(file.files.file)
    },
    beforeUpload() {
      const _self = this
      return new Promise((resolve, reject) => {
        getToken().then(response => {
          const key = response.data.qiniu_key
          const token = response.data.qiniu_token
          _self._data.dataObj.token = token
          _self._data.dataObj.key = key
          this.tempUrl = response.data.qiniu_url
          resolve(true)
        }).catch(err => {
          console.log(err)
          reject(false)
        })
      })
    }
  }
}

　　

而關於on-success在elementUI官網中的解釋是

參數	說明	類型	可選值	默認值
on-success	文件上傳成功時的鈎子	function(response, file, fileList)	—	—

on-success綁定的handleImageSuccess函數中只有file 這個參數 ，顯然這個函數可以再多加一個response參數

response是上傳成功的回調，我們可以通過后端實現一個圖片上傳接口把action屬性該為我們自己實現的圖片上傳接口，返回一條json

我后端定義的接口是 /pic/upload 后台返回的數據是json數據格式為，（根據自己情況定義json結構）

{
    "success":true,
    "code":200,
    "message":"上傳成功",
    "data":"(上傳成功的圖片地址)"
}

　　

並將handleImageSuccess改為

handleImageSuccess(res, file) {
      this.emitInput(res.data)
}

　　

 

然后該方法調用了emitInput（）方法傳入了一個值 這個方法又執行了this.$emit('input', val)

vue中 關於$emit的用法 1、父組件可以使用 props 把數據傳給子組件。 2、子組件可以使用 $emit 觸發父組件的自定義事件。

vm.$emit( event, arg ) //觸發當前實例上的事件

vm.$on( event, fn );//監聽event事件后運行 fn；

具體使用還是多學習Vue吧

最后 handleImageSuccess中this.emitInput(res.data)這條語句

最終返回的就是上傳圖片的url並回顯為upload 組件上的圖片

 

步驟

1. 修改action屬性為自己實現的接口，定義好返回的json，把圖片存在json里返回給前端，下面的response參數要用到

2. 在handleImageSuccess中添加response 將 this.$emit('input', val)修改為 this.emitInput(res.data) res.data為圖片地址

3. 完