Laravel Vue vform文件上载

我有一个表单模式，可以在编辑和创建帖子之间切换 我需要上传一张图片并提交表格。这里有一个仅上载图像字段的示例。在这里，我需要提交其他表单字段的文件

<form @submit.prevent="editmode ? updatePost() : createPost()">
<div class="modal-body">
     <div class="form-group">
        <input v-model="form.title" id="title" type="text" name="title"
            placeholder="Title"
            class="form-control" :class="{ 'is-invalid': form.errors.has('title') }">
        <has-error :form="form" field="title"></has-error>
    </div>


     <div class="form-group">
        <input v-model="form.featured" id="featured" type="file" name="featured"
            placeholder="Featured Image" @change="selectFile"
            class="form-control" :class="{ 'is-invalid': form.errors.has('featured') }">
        <has-error :form="form" field="featured"></has-error>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
    <button v-show="editmode" type="submit" class="btn btn-success">Update</button>
    <button v-show="!editmode" type="submit" class="btn btn-primary">Create</button>
</div>
</form>

使用，您可以上载文件，但仍可以传递其他字段

您需要导入额外的库调用“objectToFormData.js”，以将对象转换为FormData

这应该是工作

您可以将objectToFormData.js下载到本地文件 放在

/resources/js/objectToFormData.js

在app.js文件中添加以下代码

从“/objectToFormData”导入objectToFormData； window.objectToFormData=objectToFormData

按以下方式更改代码，需要从this.form.post更改为this.form.submit以添加转换请求

export default {
    data() {
},
methods: {
selectFile(e) {
    const file = e.target.files[0];
    this.form.featured = file;
},
   createPost(){
        this.$Progress.start();
        this.form.submit('post','api/stock-import', {

            // Transform form data to FormData
            transformRequest: [function (data, headers) {
                return objectToFormData(data)
            }]
        }).then(()=>{

            $('#addNew').modal('hide')

            this.$Progress.finish();

        })
        .catch(()=>{

        })
    }

---

我也有同样的问题，我设法解决它如下。如果有助于解决你的问题，请接受这个解决方案。@MohammadUsman我也被困在那里了。我无法对update执行相同的操作。它只适用于创建新表单。如果您想要图像插入和更新或其他类型的文件（如pdf），我可以发布我的插入和更新，以获取pdf图像。我仍然是堆栈

export default {
    data() {
},
methods: {
selectFile(e) {
    const file = e.target.files[0];
    this.form.featured = file;
},
   createPost(){
        this.$Progress.start();
        this.form.submit('post','api/stock-import', {

            // Transform form data to FormData
            transformRequest: [function (data, headers) {
                return objectToFormData(data)
            }]
        }).then(()=>{

            $('#addNew').modal('hide')

            this.$Progress.finish();

        })
        .catch(()=>{

        })
    }