PUT 表格數據 axios vue.js

Question

我剛剛用“頭像”字段更新了我的用戶 model，這樣我就可以上傳照片了。 我使用了一個已經配置好的 PUT 方法，並在其中添加了頭像。 在 postman 文件上傳（表單數據）它工作得很好，但是當嘗試使用 axios 從 vue.js 上傳它時它不起作用。 我嘗試了很多方法，最后一種方法是嘗試將請求作為多表單數據發送。

async saveChanges() {
      const fd = new FormData();
      fd.append("id", this.$auth.user().id);
      fd.append("username", this.$auth.user().username);
      fd.append("email", this.user.email);
      fd.append("firstName", this.$auth.user().firstName);
      fd.append("lastName", this.$auth.user().lastName);
      fd.append("isAdmin", this.$auth.user().isAdmin);
      fd.append("password", this.user.password);
      fd.append("confirmpass", this.user.confirmpass);
      fd.append("avatar", this.selectedFile, this.selectedFile.name);
      fd.append("_method", "put");
      try {
        await this.axios.put(`/users/${this.$auth.user().id}`, {
          fd
        }).then((res) => {
          console.log(res);
        });
      } catch (err) {
        console.error(err);
      }
}

選擇文件后，它可用，但我無法通過我的方法發送它。 我應該創建另一個請求來更新頭像還是可以解決這個問題？

Answer 1

嘗試這個

axios.put('/users/${this.$auth.user().id', fd, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Answer 2

將您的方法作為 post 方法傳遞並定義放入表單數據formData.append('_method', 'PUT') 。

async handleSubmit() {

      let formData = new FormData();
      formData.append('image', this.file);
      formData.append('title', this.form.title);
      formData.append('_method', 'PUT')

      try {
        const response = await axios.post(`image-update/${this.$route.params.id}`, formData)

        this.$router.push('/');
        console.log(response);
      } catch (e) {
        this.error = 'Something error found !';
      }
    }

Answer 3

我之前在$request->all()中返回空結果的錯誤代碼

let data = new FormData()
data.append('message', 'AnyMessage')

然后我將其更改如下，它工作正常 -

let data = "message=AnyMessage"