laravel - vue vform 文件上传

Question

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

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

这是我调用的上传图像文件的脚本。我正在使用 this.form.post('api/post') 发布数据。我需要如何在脚本中提交 multipart/form-data

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

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

                this.$Progress.finish();

            })
            .catch(()=>{

            })
        }

Answer 1

与 vform upload example您可以上传文件并仍然传递其他字段。

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

这应该是可行的。

1. 您将 objectToFormData.js 下载到本地文件放在/resources/js/objectToFormData.js

2. 在您的 app.js 文件中添加以下代码。

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

3. 如下更改您的代码，需要将 this.form.post 更改为 this.form.submit 以添加 transformRequest。

   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(()=>{
   
           })
       }