Question

我正在搜索vuejs文件上传器组件，该组件可以集成在现有表单中，其中提交仅由表单管理。在这种情况下是否有一个好的组件？

Answer 1

VueJS中有几个可用于文件上传的库。我使用的是Element Components库。以下是元素中的文件上传组件：http://element.eleme.io/#/en-US/component/upload

您可以单独安装Element并导入'upload'组件。

或者有像

这样的独立组件

https://github.com/lian-yue/vue-upload-component

https://github.com/saivarunk/vue-simple-upload

https://github.com/abarta/vue2-multi-uploader

https://github.com/rowanwins/vue-dropzone

Answer 2

你可以使用它，允许拖放： 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提交表单。

Answer 3

您可以尝试我用作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'
    }
  });
},

希望有所帮助：）

VueJS文件上传器

3 个答案: