Question

我有以下表格，我需要填写信息并上传文件，但是我不确定如何在我的vueJs应用程序中添加dropzone来与axios api调用一起使用。

我当时正在研究DropZone库，但是它看起来太混乱了，我不知道如何正确配置它以与axios一起使用。所以我想自己创建一个HTML和Java脚本。但是我不知道该怎么办。

我遵循了堆栈溢出的一些指南，并且能够通过常规输入字段将文件上传到应用程序中，但是我不知道如何将文件拖放到我要创建的放置区中。

我也尝试遵循此处找到的示例，但是大多数情况下还是无法正常工作，或者我无法将这些示例正确地插入到我的应用程序中。

drag drop files into standard html file input

我尝试创建以下表格。这些方法都与我的常规输入有关，而CSS与我的dropzone有关。

<template>
    <v-form ref='form'>
        <v-layout align-center justify-center row fill-height>
            <v-container grid-list-md text-xs-center fill-height>
                <v-layout row wrap >
                    <v-flex xs3 >
                        <v-text-field 
                        label="Find XML File" 
                        @click='pickFile' 
                        v-model='fileName' 
                        prepend-icon='attach_file'
                        :rules="file_rules"
                        ></v-text-field>
                        <input
                            type="file"
                            style="display: none"
                            ref="file"
                            accept=".xml"
                            @change="onFilePicked"
                        >
                    </v-flex>

                    <v-flex xs12 md8>
                        <div class="dropzone" id="dropzone">
                            Drop Files here
                        </div>
                    </v-flex>

                </v-layout>
            </v-container>
        </v-layout >
    </v-form>
</template>

<script>

export default {
  data: () => ({

    fileName: null,
    fileUrl: null,
    File: null,
    file_rules: [
        v => !!v || 'Campo obrigatório',
    ],
  }),
  methods: {
    validate() {
        if (this.$refs.form.validate()) {
            console.log('VALID')
            }else{
                console.log('NOT VALID')
            }
        },
    pickFile () {
        this.$refs.file.click ()
        },
    onFilePicked (e) {
            const files = e.target.files
            if(files[0] !== undefined) {
                this.fileName = files[0].name
                if(this.fileName.lastIndexOf('.') <= 0) {
                    return
                }
                const fr = new FileReader ()
                fr.readAsDataURL(files[0])
                fr.addEventListener('load', () => {
                    this.fileUrl = fr.result
                    this.File = files[0]
                })
            } else {
                this.fileName = ''
                this.File = ''
                this.fileUrl = ''
            }
        }
  },

};
</script>

<style scoped>
.dropzone {
    width:300;
    height:300;
    border:2px dashed #ccc;
    color: #ccc;
    line-height: 300px;
    text-align: center
}
.dropzone.dragover {
    border-color: #000;
    color: #000c;
}
</style>

如何在我的Vue组件中实现Dropzone

0 个答案: