时间戳

首页 > 解决方案 > 卡在通过 formData 上传图片

laravel - 卡在通过 formData 上传图片

问题描述

我有一个页面，用户可以更改他的图片配置文件，但是当我做 a 时我被卡住了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);
},

当在控制台日志上时，它就像这样显示， 空结果

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

标签： laravelvue.jsmultipartform-dataform-data

解决方案

日志记录FormData

默认toString()的FormData不记录它的条目，所以它看起来只是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)

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

<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>

演示

推荐阅读