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;
  })
},

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

上傳成功

結尾

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

0%