坚持使用 formData 上传图片

Question

我有一个页面，用户可以更改他的图片配置文件，但我在执行 submitHandle 时卡住了，因为当我尝试 console.log(formData) 时，它总是给我空的结果。

这是我的图片配置文件输入文件

<input id="file-upload" type="file" name="fileUpload" class="d-none" @change="fileUpload">
<label for="file-upload">
    <img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="`/dashboard/img/author/profile/`+user.avatar"alt="profile img" v-if="!imagePreview">
    <img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="imagePreview" alt="profile img" v-if="imagePreview">
          <span class="cross" id="remove_pro_pic">
              <i class="fas fa-camera"></i>
          </span>
</label>

这是方法

fileUpload(e) {
   let selectedImage = e.target.files[0];
   this.imageLocation = selectedImage;
   console.log(this.imageLocation.name);
   let reader = new FileReader();
   reader.readAsDataURL(this.imageLocation)
   reader.onload = e => {
   this.imagePreview = e.target.result;
 }
},

它有这样的结果，

但是当我点击保存按钮保存文件时，通过formData方法，它会得到空结果。

这是按钮更新，

<div class="button-group d-flex pt-25 justify-content-start">
    <button @click="submitHandle" class="btn btn-primary btn-default btn-squared text capitalize radius-md shadow2">Update details
    </button>
</div>

这是submitHandle方法，

submitHandle() {
                e.preventDefault();
                var formData = new FormData();
                formData.append('image', this.imageLocation);
                formData.append('name', this.user.name);
                formData.append('username', this.user.username);
                formData.append('email', this.user.email);
                formData.append('phone', this.user.phone);
                formData.append('gender', this.user.gender);
                formData.append('birth', this.user.birth);
                formData.append('bio', this.user.bio);
                formData.append("facebook", this.user.facebook);
                formData.append("instagram", this.user.instagram);
                console.log(formData);
},

并且在控制台日志中， 它只是这样显示的，

任何人都可以帮我解决这个问题吗？ 非常感谢。

Answer 1

日志记录FormData

FormData 的默认 toString() 不会 记录其条目，因此看起来 FormData 是空的。

记录条目的一种快速方法是将 FormData.prototype.entries 包装在一个数组中：

console.log(Array.from(formData.entries()))

const formData = new FormData();
formData.append('image', 'my image');
formData.append('name', 'my name');
formData.append('username', 'my username');
formData.append('email', 'my email');
formData.append('phone', 'my phone');
formData.append('gender', 'my gender');
formData.append('birth', 'my birth');
formData.append('bio', 'my bio');
formData.append("facebook", 'my facebook');
formData.append("instagram", 'my instagram');
console.log(Array.from(formData.entries()));

发送 FormData 和 axios

axios.patch 将 FormData 实例作为其第二个参数：

axios.patch(apiServerUrl, formData)

请注意，如果所有 <input> 元素都具有适当的 name 属性集，您可以从给定的 <form> 元素轻松创建 FormData，如本例所示:

<template>
  <form @submit.prevent="submitHandle">
    <label>Profile Image <input type="file" name="image" autocomplete="photo" v-model="imageLocation"></label>
    <label>Username <input type="text" name="username" autocomplete="username" v-model="user.username"></label>
    <label>Email <input type="email" name="email" autocomplete="email" v-model="user.email"></label>
    <label>Phone <input type="tel" name="phone" autocomplete="tel" v-model="user.phone"></label>
    <label>Gender <input type="text" name="gender" autocomplete="sex" v-model="user.gender"></label>
    <label>Birthdate <input type="date" name="birth" autocomplete="bday" v-model="user.birth"></label>
    <label>Bio <textarea type="text" name="bio" v-model="user.bio"></textarea></label>
    <label>Facebook <input type="text" name="facebook" v-model="user.facebook"></label>
    <label>Instagram  <input type="text" name="instagram" v-model="user.instagram"></label>

    <button type="submit">Submit</button>
  </form>

  <pre>{{ response }}</pre>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      response: null,
      imageLocation: null,
      user: {
        username: null,
        email: null,
        phone: null,
        gender: null,
        birth: null,
        bio: null,
        facebook: null,
        instagram: null,
      }
    }
  },
  methods: {
    submitHandle(e) {
      const form = e.target
      const formData = new FormData(form)
      axios.patch('https://httpbin.org/patch', formData)
        .then(resp => this.response = resp.data)
    }
  }
}
</script>

<style>
label {
  display: block;
}
</style>

demo