Vue.js 電商練習技術整理 -- 使用 FormData 上傳圖片的眉眉角角

文章目的

有時候我們會需要將圖片上傳至後端做儲存，上傳時可利用 FormData 作為圖片的資料格式。
本篇將介紹如何操作 Vue Cli 上傳圖片的細節。

FormData 簡單介紹

FormData 是一個表單格式，我們可以利用它將資料轉成表單的格式，並且以表單的形式回傳給後端。 —FormData介紹
至於上傳圖片時需不需要用 FormData 的形式上傳，是由後端來做決定。

將圖片轉換成 FormData

首先，我們會利用 html 的 <input type="file"> 來上傳我們的圖片，我們可以為 input 新增一個 change 事件，程式碼如下：
1
<input type="file" @change="uploadFile" ref="files"/>
*這邊請務必加入 ref='files' 否則下個步驟我們會找不到檔案。**
接著我們可以透過 console.log 的方式來找到我們要上傳的圖片所在位置，程式碼如下：
1
2
3
uploadFile () {
console.log(this)
}
經觀察後會發現圖片是以陣列的形式存在 $refs.files.files 下。

先宣告一個變數來儲存我們找到的圖片

1	const uploadedFile = this.$refs.files.files[0] //這邊可根據需求決定是抓哪一張圖片或是整個陣列

進行到這裡我們就可以把圖片轉換成 FromData，先宣告一個變數是我們的 new FormData()，接著我們利用 append 的方式將我們的圖片塞入，程式碼如下：
1
2
const formData = new FormData()
formData.append('資料屬性(根據後端決定)', uploadedFile)
接取 API 與渲染上傳的圖片
已成功擁有一個 FormData，接著我們就可以把 FormData 透過 API 傳給後端，那因為是以 FormData的格式傳送，跟之前以物件的形式不同，所以我們需要更改傳遞格式，程式碼如下：
1
2
3
4
5
const url = `API 路徑`
this.$http.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data' //更改成 FormData 的格式
}

接著後續就可以針對成功回傳後做操作，像是範例這邊我們為了讓上傳成功的圖片能在畫面上呈現，因此我們需要將圖片的連結存在本地端，程式碼如下：

1
2
3

if (response.data.success) {
        vm.$set(vm.tempProduct, 'imageUrl', response.data.imageUrl)
      }

這邊有一點要注意，因為用平常的方法vm.tempProduct.imgUrl = response.data.imgUrl 無法正確地將路徑儲存，因此我們改成用$set 的方式強制將路徑加入。
另外 html 方面就可以有一個 img 標籤 src 動態綁定我們上傳的圖片路徑。

1	<img :src="tempProduct.imageUrl">

最後附上完整的事件程式碼：

uploadFile () {
   console.log(this)
   const uploadedFile = this.$refs.files.files[0]
   const vm = this
   const formData = new FormData()
   formData.append('資料屬性(根據後端決定)', uploadedFile)
   const url = `上傳的 API 路徑`
   this.$http.post(url, formData, {
     headers: {
       'Content-Type': 'multipart/form-data'
     }
   }).then((response) => {
     if (response.data.success) {
       vm.$set(vm.tempProduct, 'imageUrl', response.data.imageUrl)
     }
   })
 }

參考資料

六角學院課程–Vue 出一個電商網站

文章目的

FormData 簡單介紹

將圖片轉換成 FormData

接取 API 與渲染上傳的圖片

參考資料