前言
這部分是屬於我忘記寫的地方(該打),所以這一篇來補一下產品的圖片上傳
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]; const formData = new FormData(); formData.append('file-to-upload', files); 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'); vm.$set(vm.tempProduct,'imgUrl', response.data.imageUrl); } }).catch((error) => { vm.$bus.$emit('message:push', error, 'danger'); vm.isLoading = false; }) },
|
此時就可以試著看看是否成功上傳哩
![上傳成功]()
結尾
這邊比較大的雷點是在於需要做強制的雙向綁定,由於上傳圖片後是沒有 set
、get
,所以這邊要注意加入 $set
來強制雙向綁定,這樣子圖片網址的欄位才會正常顯示