Vue 出一個女友吧!-上傳圖片

前言

這部分是屬於我忘記寫的地方(該打),所以這一篇來補一下產品的圖片上傳

API

打開 API 說明我們可以看到這邊有一個表單傳送

表單傳送

接下來打開 products.vue 在底下新增一個 updateImg 的方法,這邊唯一比較特別的是會使用 JavaScript 的 FormData 的方法,因為上傳這個行為是比較特別的,所以在 API 文件上方是有一個範例可以看到

FormData

模板這邊要新增一個監聽事件,當欄位有選取的時候就觸發事件,所以這邊會使用 @change

change

那麼當我們選擇檔案後,又該如何取得檔案呢?通常可以使用 this 來查看,然後可以看到 $refs

$refs

接下來往下找 files,就可以看到資料藏在這裡囉~

files

那上傳的程式碼就直接寫在這裡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
updateImg(){
const vm = this;
const url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/upload`;
// 取得檔案
const files = vm.$refs.files.files[0];
// 透過前端來模擬 FormData 傳統表單的傳送方式
const formData = new FormData();
// 然後透過 append 加入欄位,file-to-uploa 可以看 API 就知道哩
formData.append('file-to-upload', files);
// 注意這邊傳送的是 formData 本身,最後會帶上一個物件
vm.$http.post(url, formData, {
// 設置表單的形式
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
if (response.data.success) {
vm.$bus.$emit('message:push', response.data.message, 'success');
// 接下來會比較特別,必須將上傳的圖片路徑儲存下來
// 所以會儲存至 tempProduct.imgUrl 中
// 需注意這邊必須使用 $set 來強制雙向綁定
vm.$set(vm.tempProduct,'imgUrl', response.data.imageUrl);
}
}).catch((error) => {
vm.$bus.$emit('message:push', error, 'danger');
vm.isLoading = false;
})
},

此時就可以試著看看是否成功上傳哩

上傳成功

結尾

這邊比較大的雷點是在於需要做強制的雙向綁定,由於上傳圖片後是沒有 setget,所以這邊要注意加入 $set 來強制雙向綁定,這樣子圖片網址的欄位才會正常顯示

0%