0

我有一个也使用 vue2-dropzone 包的表单。我想我已经差不多了，只是我无法发送其余的表格。我试图获取表单的其余部分的方式是从该data()部分中获取我的表单对象，但是唯一发送的是文件，并且表单的其余部分不包括在内，并且当我console.log(this.form)未定义时。这是我的vue文件

<template>
    <div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" v-model="form.name">
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" class="form-control" v-model="form.description">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <label class="form-label">Select a file for upload</label>
                <vue-dropzone ref="myVueDropzone" id="dropzone" style="align-content: center" @vdropzone-file-added="fileAdded()" @vdropzone-success="uploadSuccess" @vdropzone-removed-file="removedFile" @vdropzone-error="showUploadError" :options="dropzoneOptions"></vue-dropzone>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <button type="button" id="add-product" class="btn btn-success">Add Product</button>
            </div>
        </div>
    </div>
</template>

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

    export default {
        props: [],
        components: {
            vueDropzone: vue2Dropzone
        },
        data(){
            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) {
                            var data = this.form;
                            console.log('dropzone sending data', data);
                            $.each(data, function(key, el) {
                                formData.append(el.name, el.value);
                            });
                        })
                    }
                },
                form: {
                    name: null,
                    description: null,
                },
            }
        }
    }
</script>
4

1 回答 1

0

你循环你的对象是错误的。尝试这个。

$.each(data, function(key, el) {
  formData.append(key, el);
});


var T = {
  form: {
    name: '123',
    description: 'asdfasdf',
  }
};

$.each(T.form, function(key, el) {
  console.log(key, el);  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

于 2021-11-26T03:28:08.787 回答