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

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