Vue使用vue2-dropzone提交表单时仅传文件、form对象undefined问题

dropzoneOptions内部的init方法、sending事件回调中的this指向的是Dropzone实例，而非Vue组件实例，因此无法直接通过this.form读取到Vue的data中定义的表单数据。同时你遍历表单字段追加到formData的逻辑也存在错误，form对象下的属性直接对应字段名和字段值，不需要取el.name、el.value。

修改script部分代码如下：

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'

export default {
    props: [],
    components: {
        vueDropzone: vue2Dropzone
    },
    data(){
        // 提前存储Vue组件实例指向
        const vm = this
        const token = document.head.querySelector('meta[name="csrf-token"]').content
        return {
            dropzoneOptions: {
                url: `/api/product/save`,
                thumbnailWidth: 150,
                maxFilesize: 9.5,
                headers: { 'X-CSRF-TOKEN': token },
                dictDefaultMessage:"Select file for upload",
                addRemoveLinks: true,
                autoProcessQueue: false,
                init: function(){
                    let myDropzone = this;

                    $("#add-product").click(function (e) {
                        e.preventDefault();
                        myDropzone.processQueue();
                    });

                    this.on('sending', function(file, xhr, formData) {
                        // 通过提前存储的vm指向获取Vue里的form数据
                        var data = vm.form;
                        console.log('dropzone sending data', data);
                        // 遍历表单字段追加到formData
                        Object.keys(data).forEach(key => {
                            formData.append(key, data[key]);
                        });
                    })
                }
            },
            form: {
                name: null,
                description: null,
            },
        }
    },
    // 补充你代码里缺失的dropzone事件回调方法，避免控制台报错
    methods: {
        fileAdded(){},
        uploadSuccess(){},
        removedFile(){},
        showUploadError(){}
    }
}

你当前用jQuery绑定按钮点击的写法不符合Vue规范，可调整为原生Vue事件绑定，不需要依赖jQuery：

1. 模板中的按钮添加点击事件：

<button type="button" id="add-product" class="btn btn-success" @click="submitForm">Add Product</button>

2. 删除dropzoneOptions.init方法里的jQuery绑定点击事件的代码，调整methods方法：

methods: {
    submitForm() {
        this.$refs.myVueDropzone.processQueue()
    },
    fileAdded(){},
    uploadSuccess(){},
    removedFile(){},
    showUploadError(){}
}

内容的提问来源于stack exchange，提问作者cerberusphp