使用Vue實現圖片上傳的三種方式

易水人去丶明月如霜發表於2019-03-06

Vue

專案中需要上傳圖片可謂是經常遇到的需求，本文將介紹 3 種不同的圖片上傳方式，在這總結分享一下，有什麼建議或者意見，請大家踴躍提出來。

沒有業務場景的功能都是耍流氓，那麼我們先來模擬一個需要實現的業務場景。假設我們要做一個後臺系統新增商品的頁面，有一些商品名稱、資訊等欄位，還有需要上傳商品輪播圖的需求。

我們就以Vue、Element-ui，封裝元件為例子聊聊如何實現這個功能。其他框架或者不用框架實現的思路都差不多，本文主要聊聊實現思路。

1.雲儲存

常見的七牛雲，OSS（阿里雲）等，這些雲平臺提供API介面，呼叫相應的介面，檔案上傳後會返回圖片儲存在伺服器上的路徑，前端獲得這個路徑儲存下來提交給後端即可。此流程處理相對簡單。

主要步驟

向後端傳送請求，獲取OSS配置資料
檔案上傳，呼叫OSS提供介面
檔案上傳完成，後的檔案儲存在伺服器上的路徑
將返回的路徑存值到表單物件中

程式碼範例

我們以阿里的 OSS 服務來實現，們試著來封裝一個OSS的圖片上傳元件。

通過element-ui的upLoad元件的 http-request 引數來自定義我們的檔案上傳，僅僅使用他元件的樣式，和其他上傳前的相關鉤子（控制圖片大小，上傳數量限制等）。

<template>
 <el-upload
  list-type="picture-card"
  action="''"
  :http-request="upload"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus"></i>
 </el-upload>
</template>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向後端獲取 OSS祕鑰資訊
 import {createId} from '@/utils' // 一個生產唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
  name: 'imgUpload',
  data () {
   return {}
  },
  methods: {
   // 圖片上傳前驗證
   beforeAvatarUpload (file) {
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
     this.$message.error('上傳頭像圖片大小不能超過 2MB!')
    }
    return isLt2M
   },
   // 上傳圖片到OSS 同時派發一個事件給父元件監聽
   upload (item) {
    getAliOSSCreds().then(res => { // 向後臺發請求 拉取OSS相關配置
     let creds = res.body.data
     let client = new OSS.Wrapper({
      region: 'oss-cn-beijing', // 伺服器叢集地區
      accessKeyId: creds.accessKeyId, // OSS帳號
      accessKeySecret: creds.accessKeySecret, // OSS 密碼
      stsToken: creds.securityToken, // 簽名token
      bucket: 'imgXXXX' // 阿里雲上儲存的 Bucket
     })
     let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 儲存路徑，並且給圖片改成唯一名字
     return client.put(key, item.file) // OSS上傳
    }).then(res => {
     console.log(res.url)
     this.$emit('on-success', res.url) // 返回圖片的儲存路徑
    }).catch(err => {
     console.log(err)
    })
   }
  }
 }
</script>

傳統檔案伺服器上傳圖片

此方法就是上傳到自己檔案伺服器硬碟上，或者雲主機的硬碟上，都是通過 formdata 的方式進行檔案上傳。具體的思路和雲檔案伺服器差不多。

主要步驟

設定伺服器上傳路徑、上傳檔案欄位名、header、data引數等
上傳成功後，返回伺服器儲存的路徑
返回的圖片路徑儲存到表單提交物件中

程式碼示例

此種圖片上傳根據element-ui的upLoad元件只要傳入後端約定的相關欄位即可實現，若使用元素js也是生成formdata物件，通過Ajax去實現上傳也是類似的。

這裡只做一個簡單的示例，具體請看el-upload元件相文件就能實現

<template>
 <el-upload
  ref="imgUpload"
  :on-success="imgSuccess"
  :on-remove="imgRemove"
  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
  :headers="headerMsg"
  :action="upLoadUrl"
  multiple>
  <el-button type="primary">上傳圖片</el-button>
 </el-upload>
</template>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向後端獲取 OSS祕鑰資訊
 import {createId} from '@/utils' // 一個生產唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
  name: 'imgUpload',
  data () {
   return {
     headerMsg:{Token:'XXXXXX'},
     upLoadUrl:'xxxxxxxxxx'
   }
  },
  methods: {
   // 上傳圖片成功
   imgSuccess (res, file, fileList) {
    console.log(res)
    console.log(file)
    console.log(fileList)  // 這裡可以獲得上傳成功的相關資訊
   }
  }
 }
</script>

圖片轉 base64 後上傳

有時候做一些私活專案，或者一些小圖片上傳可能會採取前端轉base64後成為字串上傳。當我們有這一個需求，有一個商品輪播圖多張，轉base64編碼後去掉data:image/jpeg;base64,將字串以逗號的形勢拼接，傳給後端。我們如何來實現呢。

1.本地檔案如何轉成 base64

我們通過H5新特性 readAsDataURL 可以將檔案轉base64格式，輪播圖有多張，可以在點選後立馬轉base64也可，我是在提交整個表單錢一次進行轉碼加工。

具體步驟

新建檔案封裝非同步轉base64的方法
新增商品的時候選擇本地檔案，選中用物件儲存整個file物件
最後提交整個商品表單之前進行編碼處理

在這裡要注意一下，因為 readAsDataURL 操作是非同步的，我們如何將存在陣列中的若干的 file物件，進行編碼，並且按照上傳的順序，把編碼後端圖片base64字串儲存在一個新陣列內呢，首先想到的是promise的鏈式呼叫，可是不能併發進行轉碼，有點浪費時間。我們可以通過迴圈 async 函式進行併發，並且排列順序。請看 methods 的 submitData 方法

utils.js

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function () { // 圖片轉base64完成後返回reader物件
   resolve(reader)
  }
  reader.onerror = reject
 })
}

新增商品頁面部分程式碼

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
 import { uploadImgToBase64 } from '@/utils' // 匯入本地圖片轉base64的方法
 
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱欄位
      imgBroadcastList:[], // 儲存選中的圖片列表
      imgsStr:''   // 後端需要的多張圖base64字串 , 分割
    }
   }
  },
  methods: {
   // 圖片選擇後 儲存在 diaLogForm.imgBroadcastList 物件中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過 2MB,請重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除後 觸發
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 提交彈窗資料
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉base64開始...')
    // 併發 轉碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     const response = await uploadImgToBase64(file.raw)
     return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉base64結束..., ', imgBroadcastListBase64)
    this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    const res = await addCommodity(this.diaLogForm)       // 發請求提交表單
    if (res.status) {
     this.$message.success('新增商品成功')
     // 一般提交成功後後端會處理，在需要展示商品地方會返回一個圖片路徑 
    }
   },
  }
 }
</script>

這樣本地圖片上傳的時候轉base64上傳就完成了。可是輪播圖有可以進行編輯，我們該如何處理呢？一般來說商品增加頁面和修改頁面可以公用一個元件，那麼我們繼續在這個頁面上修改。

編輯時我們首先會拉取商品原有資料，進行展示，在進行修改，這時候伺服器返回的圖片是一個路徑 http://xxx.xxx.xxx/abc.jpg 這樣，當我們新增一張圖片的還是和上面的方法一樣轉碼即可。可是後端說，沒有修改的圖片也要賺base64轉過來，好吧那就做把。這是一個線上連結圖片，不是本地圖片，怎麼做呢？

2. 線上圖片轉base64

具體步驟

utils.js 檔案新增線上圖片轉base64的方法，利用canvas

編輯商品，先拉取原來的商品資訊展示到頁面

提交表單之前，區分線上圖片還是本地圖片進行轉碼

utils.js

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  function getBase64Image (img) {
   const canvas = document.createElement('canvas')
   canvas.width = img.width
   canvas.height = img.height
   const ctx = canvas.getContext('2d')
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   var dataURL = canvas.toDataURL()
   return dataURL
  }
 
  const image = new Image()
  image.crossOrigin = '*' // 允許跨域圖片
  image.src = img + '?v=' + Math.random() // 清除圖片快取
  console.log(img)
  image.onload = function () {
   resolve(getBase64Image(image))
  }
  image.onerror = reject
 })
}

新增商品頁面部分程式碼

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
  import { uploadImgToBase64, URLImgToBase64 } from '@/utils'
   
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱欄位
      imgBroadcastList:[], // 儲存選中的圖片列表
      imgsStr:''   // 後端需要的多張圖base64字串 , 分割
    }
   }
  },
  created(){
    this.getGoodsData()
  },
  methods: {
   // 圖片選擇後 儲存在 diaLogForm.imgBroadcastList 物件中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過 2MB,請重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除後 觸發
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 獲取商品原有資訊
   getGoodsData () {
    getCommodityById({ cid: this.diaLogForm.id }).then(res => {
     if (res.status) {
      Object.assign(this.diaLogForm, res.data)
      // 把 '1.jpg,2.jpg,3.jpg' 轉成[{url:'http://xxx.xxx.xx/j.jpg',...}] 這種格式在upload元件內展示。 imgBroadcastList 展示原有的圖片
      this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + '/' + v })) 
     }
    }).catch(err => {
     console.log(err.data)
    })
   },
   // 提交彈窗資料
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉base64開始...')
    this.dialogFormLoading = true
    // 併發 轉碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     if (file.raw) { // 如果是本地檔案
      const response = await uploadImgToBase64(file.raw)
      return response.result.replace(/.*;base64,/, '')
     } else { // 如果是線上檔案
      const response = await URLImgToBase64(file.url)
      return response.replace(/.*;base64,/, '')
     }
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉base64結束...')
    this.diaLogForm.imgs = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    if (!this.isEdit) { // 新增編輯 公用一個元件。區分介面呼叫
     const res = await addCommodity(this.diaLogForm)       // 提交表單
     if (res.status) {
      this.$message.success('新增成功')
     }
    } else {
     const res = await modifyCommodity(this.diaLogForm)      // 提交表單
     if (res.status) {
      this.$router.push('/goods/goods-list')
      this.$message.success('編輯成功')
     }
    }
   }
  }
 }
</script>

結語

至此常用的三種圖片上傳方式就介紹完了，轉base64方式一般在小型專案中使用，大檔案上傳還是傳統的 formdata或者雲服務，更合適。但是通過轉base64方式也使得，在前端進行圖片編輯成為了可能，不需要上傳到伺服器就能預覽。主要收穫還是對於非同步操作的處理。
最後

為了幫助大家讓學習變得輕鬆、高效，給大家免費分享一大批資料，幫助大家在成為全棧工程師，乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈：866109386.歡迎大家進群交流討論，學習交流，共同進步。

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。

專案中需要上傳圖片可謂是經常遇到的需求，本文將介紹 3 種不同的圖片上傳方式，在這總結分享一下，有什麼建議或者意見，請大家踴躍提出來。

我們就以Vue、Element-ui，封裝元件為例子聊聊如何實現這個功能。其他框架或者不用框架實現的思路都差不多，本文主要聊聊實現思路。

1.雲儲存

主要步驟

向後端傳送請求，獲取OSS配置資料
檔案上傳，呼叫OSS提供介面
檔案上傳完成，後的檔案儲存在伺服器上的路徑
將返回的路徑存值到表單物件中

程式碼範例

我們以阿里的 OSS 服務來實現，們試著來封裝一個OSS的圖片上傳元件。

<template>
 <el-upload
  list-type="picture-card"
  action="''"
  :http-request="upload"
  :before-upload="beforeAvatarUpload">
  <i class="el-icon-plus"></i>
 </el-upload>
</template>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向後端獲取 OSS祕鑰資訊
 import {createId} from '@/utils' // 一個生產唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
  name: 'imgUpload',
  data () {
   return {}
  },
  methods: {
   // 圖片上傳前驗證
   beforeAvatarUpload (file) {
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
     this.$message.error('上傳頭像圖片大小不能超過 2MB!')
    }
    return isLt2M
   },
   // 上傳圖片到OSS 同時派發一個事件給父元件監聽
   upload (item) {
    getAliOSSCreds().then(res => { // 向後臺發請求 拉取OSS相關配置
     let creds = res.body.data
     let client = new OSS.Wrapper({
      region: 'oss-cn-beijing', // 伺服器叢集地區
      accessKeyId: creds.accessKeyId, // OSS帳號
      accessKeySecret: creds.accessKeySecret, // OSS 密碼
      stsToken: creds.securityToken, // 簽名token
      bucket: 'imgXXXX' // 阿里雲上儲存的 Bucket
     })
     let key = 'resource/' + localStorage.userId + '/images/' + createId() + '.jpg' // 儲存路徑，並且給圖片改成唯一名字
     return client.put(key, item.file) // OSS上傳
    }).then(res => {
     console.log(res.url)
     this.$emit('on-success', res.url) // 返回圖片的儲存路徑
    }).catch(err => {
     console.log(err)
    })
   }
  }
 }
</script>

傳統檔案伺服器上傳圖片

此方法就是上傳到自己檔案伺服器硬碟上，或者雲主機的硬碟上，都是通過 formdata 的方式進行檔案上傳。具體的思路和雲檔案伺服器差不多。

主要步驟

設定伺服器上傳路徑、上傳檔案欄位名、header、data引數等
上傳成功後，返回伺服器儲存的路徑
返回的圖片路徑儲存到表單提交物件中

程式碼示例

此種圖片上傳根據element-ui的upLoad元件只要傳入後端約定的相關欄位即可實現，若使用元素js也是生成formdata物件，通過Ajax去實現上傳也是類似的。

這裡只做一個簡單的示例，具體請看el-upload元件相文件就能實現

<template>
 <el-upload
  ref="imgUpload"
  :on-success="imgSuccess"
  :on-remove="imgRemove"
  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
  :headers="headerMsg"
  :action="upLoadUrl"
  multiple>
  <el-button type="primary">上傳圖片</el-button>
 </el-upload>
</template>
 
<script>
 import {getAliOSSCreds} from '@/api/common' // 向後端獲取 OSS祕鑰資訊
 import {createId} from '@/utils' // 一個生產唯一的id的方法
 import OSS from 'ali-oss'
 
 export default {
  name: 'imgUpload',
  data () {
   return {
     headerMsg:{Token:'XXXXXX'},
     upLoadUrl:'xxxxxxxxxx'
   }
  },
  methods: {
   // 上傳圖片成功
   imgSuccess (res, file, fileList) {
    console.log(res)
    console.log(file)
    console.log(fileList)  // 這裡可以獲得上傳成功的相關資訊
   }
  }
 }
</script>

圖片轉 base64 後上傳

1.本地檔案如何轉成 base64

我們通過H5新特性 readAsDataURL 可以將檔案轉base64格式，輪播圖有多張，可以在點選後立馬轉base64也可，我是在提交整個表單錢一次進行轉碼加工。

具體步驟

新建檔案封裝非同步轉base64的方法
新增商品的時候選擇本地檔案，選中用物件儲存整個file物件
最後提交整個商品表單之前進行編碼處理

utils.js

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = function () { // 圖片轉base64完成後返回reader物件
   resolve(reader)
  }
  reader.onerror = reject
 })
}

新增商品頁面部分程式碼

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
 import { uploadImgToBase64 } from '@/utils' // 匯入本地圖片轉base64的方法
 
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱欄位
      imgBroadcastList:[], // 儲存選中的圖片列表
      imgsStr:''   // 後端需要的多張圖base64字串 , 分割
    }
   }
  },
  methods: {
   // 圖片選擇後 儲存在 diaLogForm.imgBroadcastList 物件中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過 2MB,請重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除後 觸發
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 提交彈窗資料
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉base64開始...')
    // 併發 轉碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     const response = await uploadImgToBase64(file.raw)
     return response.result.replace(/.*;base64,/, '') // 去掉data:image/jpeg;base64,
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉base64結束..., ', imgBroadcastListBase64)
    this.diaLogForm.imgsStr = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    const res = await addCommodity(this.diaLogForm)       // 發請求提交表單
    if (res.status) {
     this.$message.success('新增商品成功')
     // 一般提交成功後後端會處理，在需要展示商品地方會返回一個圖片路徑 
    }
   },
  }
 }
</script>

2. 線上圖片轉base64

具體步驟

utils.js 檔案新增線上圖片轉base64的方法，利用canvas

編輯商品，先拉取原來的商品資訊展示到頁面

提交表單之前，區分線上圖片還是本地圖片進行轉碼

utils.js

export function uploadImgToBase64 (file) {
 return new Promise((resolve, reject) => {
  function getBase64Image (img) {
   const canvas = document.createElement('canvas')
   canvas.width = img.width
   canvas.height = img.height
   const ctx = canvas.getContext('2d')
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   var dataURL = canvas.toDataURL()
   return dataURL
  }
 
  const image = new Image()
  image.crossOrigin = '*' // 允許跨域圖片
  image.src = img + '?v=' + Math.random() // 清除圖片快取
  console.log(img)
  image.onload = function () {
   resolve(getBase64Image(image))
  }
  image.onerror = reject
 })
}

新增商品頁面部分程式碼

<template>
 <div>
   <el-upload
    ref="imgBroadcastUpload"
    :auto-upload="false" multiple
    :file-list="diaLogForm.imgBroadcastList"
    list-type="picture-card"
    :on-change="imgBroadcastChange"
    :on-remove="imgBroadcastRemove"
    accept="image/jpg,image/png,image/jpeg"
    action="">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過2M</div>
   </el-upload>
   <el-button>submitData</el-button> 
 </div>
</template>
 
<script>
  import { uploadImgToBase64, URLImgToBase64 } from '@/utils'
   
 export default {
  name: 'imgUpload',
  data () {
   return {
    diaLogForm: {
      goodsName:'', // 商品名稱欄位
      imgBroadcastList:[], // 儲存選中的圖片列表
      imgsStr:''   // 後端需要的多張圖base64字串 , 分割
    }
   }
  },
  created(){
    this.getGoodsData()
  },
  methods: {
   // 圖片選擇後 儲存在 diaLogForm.imgBroadcastList 物件中
   imgBroadcastChange (file, fileList) {
    const isLt2M = file.size / 1024 / 1024 < 2 // 上傳頭像圖片大小不能超過 2MB
    if (!isLt2M) {
     this.diaLogForm.imgBroadcastList = fileList.filter(v => v.uid !== file.uid)
     this.$message.error('圖片選擇失敗，每張圖片大小不能超過 2MB,請重新選擇!')
    } else {
     this.diaLogForm.imgBroadcastList.push(file)
    }
   },
   // 有圖片移除後 觸發
   imgBroadcastRemove (file, fileList) {
    this.diaLogForm.imgBroadcastList = fileList
   },
   // 獲取商品原有資訊
   getGoodsData () {
    getCommodityById({ cid: this.diaLogForm.id }).then(res => {
     if (res.status) {
      Object.assign(this.diaLogForm, res.data)
      // 把 '1.jpg,2.jpg,3.jpg' 轉成[{url:'http://xxx.xxx.xx/j.jpg',...}] 這種格式在upload元件內展示。 imgBroadcastList 展示原有的圖片
      this.diaLogForm.imgBroadcastList = this.diaLogForm.imgsStr.split(',').map(v => ({ url: this.BASE_URL + '/' + v })) 
     }
    }).catch(err => {
     console.log(err.data)
    })
   },
   // 提交彈窗資料
   async submitDialogData () {
    const imgBroadcastListBase64 = []
    console.log('圖片轉base64開始...')
    this.dialogFormLoading = true
    // 併發 轉碼輪播圖片list => base64
    const filePromises = this.diaLogForm.imgBroadcastList.map(async file => {
     if (file.raw) { // 如果是本地檔案
      const response = await uploadImgToBase64(file.raw)
      return response.result.replace(/.*;base64,/, '')
     } else { // 如果是線上檔案
      const response = await URLImgToBase64(file.url)
      return response.replace(/.*;base64,/, '')
     }
    })
    // 按次序輸出 base64圖片
    for (const textPromise of filePromises) {
     imgBroadcastListBase64.push(await textPromise)
    }
    console.log('圖片轉base64結束...')
    this.diaLogForm.imgs = imgBroadcastListBase64.join()
    console.log(this.diaLogForm)
    if (!this.isEdit) { // 新增編輯 公用一個元件。區分介面呼叫
     const res = await addCommodity(this.diaLogForm)       // 提交表單
     if (res.status) {
      this.$message.success('新增成功')
     }
    } else {
     const res = await modifyCommodity(this.diaLogForm)      // 提交表單
     if (res.status) {
      this.$router.push('/goods/goods-list')
      this.$message.success('編輯成功')
     }
    }
   }
  }
 }
</script>

結語

當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。

但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有有效資源還是很有必要的。

最後祝福所有遇到瓶疾且不知道怎麼辦的前端程式設計師們，祝福大家在往後的工作與面試中一切順利。

用Vue來實現圖片上傳多種方式
2018-07-16
Vue
vue 實現貼上上傳圖片
2020-11-18
Vue
實現圖片染色效果的三種方式
2019-02-18
實現圖片懶載入的三種方式
2018-06-26
element-ui+Vue實現的圖片上傳
2018-12-12
UIVue
Java和PHP兩種方式實現上傳圖片到新浪微博的圖床
2018-04-02
JavaPHP圖床
Vue +Element Ui 使用Upload元件實現多圖片上傳
2019-03-12
VueUI元件
vue 實現剪裁圖片並上傳伺服器
2018-02-28
Vue伺服器
Vue專案中最簡單的使用整合UEditor方式，含圖片上傳
2018-08-22
Vue
formData原生實現圖片上傳
2019-03-04
ORM
vue路由傳參的三種基本方式
2018-08-13
Vue路由
Vue圖片裁剪上傳元件
2019-03-27
Vue元件
vue圖片預覽上傳
2018-07-18
Vue
vue 上傳圖片進行壓縮圖片
2020-09-25
Vue
PHP實現圖片（檔案）上傳
2019-06-27
PHP
如何呼叫第三方API實現圖片上傳。
2018-12-13
API
vue 元件的三種使用方式教程
2019-03-20
Vue元件
python 三種方式實現截圖
2022-08-26
Python
FileReader初步使用實現上傳圖片預覽效果
2019-03-04
Java實現圖片上傳到伺服器，並把上傳的圖片讀取出來
2019-04-26
Java伺服器
記錄三種實現圖片模糊的方法
2017-12-13
node+express實現圖片上傳功能
2019-03-04
Express
layui中實現上傳圖片壓縮
2018-08-28
UI
通過API介面實現圖片上傳
2020-11-05
API
HTML5實現圖片上傳2
2017-10-30
HTML
css實現圖片自適應容器的幾種方式
2019-02-25
CSS
struts：實現圖片的上傳 argument type mismatch error
2020-04-05
Error
VUE + UEditor 單圖片跨域上傳
2018-02-07
Vue跨域
vue中實現路由跳轉的三種方式（精選）
2020-12-29
Vue路由
angularjs 實現圖片上傳實時預覽
2017-04-18
AngularJS
如何使用 API 的方式給 SAP service cloud Registered product 上傳圖片
2021-07-11
APICloud
js實現的判斷上傳圖片的型別
2017-03-20
JS型別
Laravel 使用 FastDFS 上傳圖片
2020-05-04
LaravelAST
Ajax+PHP實現非同步圖片上傳
2018-01-26
PHP非同步
django 實現圖片上傳和顯示操作
2018-03-30
Django
jsp+springmvc實現檔案上傳、圖片上傳和及時預覽圖片
2016-05-12
JSSpringMVC
前端丨如何使用 tcb-js-sdk 實現圖片上傳功能
2020-07-02
前端JS
騰訊cos安裝，上傳圖片實際使用
2020-08-23

使用Vue實現圖片上傳的三種方式

相關文章