如何绕过未在 VueJS/Axios 中上传的输入文件

如何解决如何绕过未在 VueJS/Axios 中上传的输入文件

我正在制作一个 VueJS 博客；我正在处理更新页面，除了输入文件字段外，一切都在工作：它仅在您上传文件时才有效，如果您不上传它，控制台会返回此错误：

未捕获的类型错误：无法在“FormData”上执行“append”： 参数 2 不是“Blob”类型。

另外，我试图用一个变量和一个布尔字段创建一个 if 状态，但这样图像永远不会上传（但它没有在控制台中给出任何错误，如果你不上传它会使表单工作一个图像）。我将在带有和不带有 if 语句的代码下方。后端由 Django 和 Django Rest 框架组成。

没有 If 语句的 VueJS（第一个示例）

<template>
    <main>
        <SideBar></SideBar>
        <section>
            <h3>Edit {{ form.title }}</h3>
            <form @submit.prevent = "onSubmit" enctype="multipart/form-data">
                <input type="text" name="title" placeholder="Titolo" v-model="form.title">
                <input type="text" name="category" v-model="form.category">
                <textarea type="text" name="desc" placeholder="Descrizione" v-model="form.desc"> </textarea>
                <textarea name="text" v-model="form.text"></textarea>
                <input type="file" name="image" @change="Editimage">
                <input type="text" name="author" v-model="form.author">
                <input type="text" name="author" v-model="form.slug">
                <button type="submit">Edit</button>
            </form>
        </section>
    </main>
</template>
<script>
import axios from 'axios';
import { getAPI } from '../api'
import SideBar from '../components/Admin/Sidebar.vue';
import swal from 'sweetalert'
export default {
    components: { 
        'SideBar': SideBar
    },data () {
        return{
            Postslug: this.$route.params.Postslug,form: {
                title:"",desc:"",text:"",category:"",date:"",author:"",image:"",slug:"",},}
    },methods: {
        Editimage(event){
            this.form.image = event.target.files[0]
        },// Form method
        onSubmit(event,imageSelection){
            console.log(imageSelection);
            const fd = new FormData();

            fd.append('title',this.form.title)
            fd.append('desc',this.form.desc)
            fd.append('text',this.form.text)
            fd.append('category',this.form.category)
            fd.append('date',this.form.date)
            fd.append('author',this.form.author)
            fd.append('image',this.form.image,this.form.image.name)   
            fd.append('slug',this.form.slug)

            // event.preventDefault();     
            axios.patch(`http://127.0.0.1:8000/blog/api/edit/${this.Postslug}`,fd).then(response => {
              this.form.title = response.data.title
              this.form.desc = response.data.desc
              this.form.text = response.data.text
              this.form.image = response.data.image
              this.form.category = response.data.category
              this.form.author = response.data.author
              this.form.slug = response.data.slug
              
              this.$router.push({ name: 'AdmineditArticle',params: {Postslug: this.form.slug } });
              
              swal("Articolo editato","","success")
              .then(() => {
                  window.location.reload()
                })
                .catch(() => {
                    swal("Problema","warning")
                });
              })

            .catch(err => {
            })
        },created() {
        getAPI.get(`blog/api/edit/${this.Postslug}`)
            .then(response => {
              this.form.title = response.data.title
              this.form.desc = response.data.desc
              this.form.text = response.data.text
              this.form.date = response.data.date
              this.form.image = response.data.image
              this.form.category = response.data.category
              this.form.author = response.data.author
              this.form.slug = response.data.slug
            })
            .catch(err => {
              console.log(err)
            })
        },name: 'AdmineditArticle',}

</script>
<style lang="sass" scoped>
stuff...
</style>

使用 if 语句的代码（第二个示例）

<template>
    <main>
        <SideBar></SideBar>
        <section>
            <h3>Edit {{ form.title }}</h3>
            <form @submit.prevent = "onSubmit" enctype="multipart/form-data">
                <input type="text" name="title" placeholder="Titolo" v-model="form.title">
                <input type="text" name="category" v-model="form.category">
                <textarea type="text" name="desc" placeholder="Descrizione" v-model="form.desc"> </textarea>
                <textarea name="text" v-model="form.text"></textarea>
                <input type="file" name="image" @change="Editimage">
                <input type="text" name="author" v-model="form.author">
                <input type="text" name="author" v-model="form.slug">
                <button type="submit">Edit</button>
            </form>
        </section>
    </main>
</template>
<script>
import axios from 'axios';
import { getAPI } from '../api'
import SideBar from '../components/Admin/Sidebar.vue';
import swal from 'sweetalert'
let imageSelection = false;
export default {
    components: { 
        'SideBar': SideBar
    },methods: {
        Editimage(event){
            this.form.image = event.target.files[0]
            let imageSelection = true
            return imageSelection
        },this.form.author)
            if (imageSelection == true) {
             fd.append('image',this.form.image.name)   
            }
            fd.append('slug',}

</script>
<style lang="sass" scoped>
stuff...
</style>

感谢您的帮助

解决方法

问题是您试图用表单保存图像。 为此，您应该首先上传文件，然后获取 imagePath（您上传它的位置）并将路径保存在您的表单中。

因此，在您的提交功能中，您应该发出一个发布请求以上传图片并获取将作为您服务器上的图片路径的响应并将其保存在您的表单对象中。

示例：

onSubmit() {
  if(checkIfCreateOrEdit)
       createPost(this.form).then(res => {
             if (this.form.image instanceof File) {
                 const formData = new FormData()
                 formData.append('imagePhoto',this.form.image)
            return axios.post(url,headers: 'Content-Type':'multipart/form-data',data: formData)
                
 
          })
          .then(()=> this.$router.push(....) )
          .catch(....)
} else {
    editPost(this.form,this.post.id){
             .....the same as above but you make a put request based on the id
             }
}

注意事项： 尝试在表单对象上使用解构。 为了在提交表单后在模板上显示图像，您应该重新创建 imagePath 并将其作为 src 属性传递。