我正在寻找一个 vuejs 文件上传器组件，它可以集成到现有表单中，其中提交由表单单独管理。这种情况下有好的组件吗？
【问题讨论】：
在 VueJS 中有几个可用于文件上传的库。我使用的是元素组件库。这是Element中的文件上传组件：http://element.eleme.io/#/en-US/component/upload
您可以单独安装 Element 并导入“上传”组件。
或者有像
这样的独立组件https://github.com/lian-yue/vue-upload-component
https://github.com/saivarunk/vue-simple-upload
【讨论】：
您可以使用它，它允许拖放： https://github.com/plantain-00/file-uploader-component
在组件中：
<file-uploader @file-uploaded="addFileToForm(arguments[0])" multiple="false"></file-uploader>
在你的方法中：
addFileToForm(e) {
this.form.file = e // gets the full file object
this.form.file_name = e.name // get the name of the file
}
然后您可以使用 multipart/form-data 提交表单。
【讨论】：
你可以试试我用作 filePicker 的组件：
<template>
<input v-show="showNative" type="file" :name="name" @change="onFileChanged" :multiple="multiple" :accept="accept"/>
</template>
<script>
/**
* Handles system files selection and provides the selected files.
*
* How to use:
*
* - import the component -> declare the directive.
* - provide a <name> -> is used for the formData creation (is the name which is going to backend).
* - to display it us the <show> property
* Note: sync recommended if needed to be opened multiple times in the same page. Check the bottom examples. ( /!\ Vue 2.3 required for sync /!\ )
* - listen to @files event to get an array of selected files as parameter
* - if you want to use it as multiple file select, then provide the property <multiple> as true.
* - use <accept> prop to filter the files (valid accept types: https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv).
* - when <showNative> is set to true, the component displays 'select file' button (input type file), otherwise it is hidden, and windows displayed by Js.
*/
export default {
props: {
name: { type: String, required: true },
show: { type: Boolean, Default: false },
multiple: { type: Boolean, default: false },
accept: { type: String, default: "" },
showNative: { type: Boolean, default: false }
},
watch: {
show(value) {
if (value) {
// Resets the file to let <onChange> event to work.
this.$el.value = "";
// Opens select file system dialog.
this.$el.click();
// Resets the show property (sync technique), in order to let the user to reopen the dialog.
this.$emit('update:show', false);
}
}
},
methods: {
onFileChanged(event) {
var files = event.target.files || event.dataTransfer.files;
if (!files.length) {
return;
}
var formData = new FormData();
// Maps the provided name to files.
formData.append(this.name, this.multiple ? files : files[0]);
// Returns formData (which can be sent to the backend) and optional, the selected files (parent component may need some information about files).
this.$emit("files", formData, files);
}
}
}
</script>
你可以像这样简单地使用它：
SINGLE SELECT
<file-upload name="fooImport" @files="selectedFile" :show.sync="true" />
MULTIPLE SELECT
<file-upload name="barUpload" @files="selectedFiles" :show.sync="displayUpload" accept="text/plain, .pdf" />
回调：
selectedFiles(formData) {
// FOR EXAMPLE
Axios.post('/api/upload/', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
},
希望对你有帮助:)
【讨论】：