vue2从安装filepond开始来写一个实现多文件 不同时上传,的例子

首先，需要安装FilePond和FilePond Vue插件。可以通过以下命令进行安装：

npm install filepond filepond-plugin-file-validate-type filepond-plugin-image-preview vue-filepond filepond-plugin-image-resize

安装完成后，可以在Vue组件中导入所需的插件和组件：

import Vue from 'vue'
import vueFilePond from 'vue-filepond'
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
import FilePondPluginImageResize from 'filepond-plugin-image-resize'
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

然后，可以在Vue组件中使用FilePond组件，如下所示：

<template>
  <div>
    <vue-file-pond
      ref="filePond"
      class="filepond"
      :files="files"
      :server="{
        process: (fieldName, file, metadata, load, error, progress, abort) => {
          // 处理文件上传逻辑
        }
      }"
      :label-idle="'将文件拖放到此处或 <span class=\'filepond--label-action\'>浏览</span>'"
      :allow-multiple="true"
      :max-files="5"
      :accepted-file-types="['image/png', 'image/jpeg']"
      :image-preview-max-height="256"
      :image-resize-target-height="256"
      :image-resize-target-width="256"
      :image-resize-quality="0.8"
      :image-resize-mode="'contain'"
      :file-validate-type-label-mismatch="'文件类型不符合要求.'"
      :file-validate-type-label-mime-mismatch="'文件类型不符合要求.'"
      :file-validate-type-label-max-file-size-exceeded="'文件大小不能超过5MB.'"
      :file-validate-type-label-min-file-size="'文件大小不能小于100KB.'"
      :file-validate-type-label-max-file-size="'文件大小不能超过5MB.'"
      @init="handleFilePondInit"
    >
    </vue-file-pond>
  </div>
</template>

上面的代码中，我们将FilePond组件作为Vue文件上传的UI组件，并定义了一些属性，例如：

- `files`：用于存储已选择的文件的数组。
- `server`：用于定义文件上传的处理逻辑。
- `label-idle`：用于定义FilePond组件的UI标签。
- `allow-multiple`：允许选择多个文件。
- `max-files`：最多选择5个文件。
- `accepted-file-types`：只允许选择PNG和JPEG图像文件。
- `image-preview-max-height`：预览图像的最大高度为256px。
- `image-resize-target-height`：缩放图像的高度为256px。
- `image-resize-target-width`：缩放图像的宽度为256px。
- `image-resize-quality`：缩放图像的质量为0.8。
- `image-resize-mode`：缩放图像的模式为"contain"。
- `file-validate-type-label-mismatch`：文件类型不符合要求的提示信息。
- `file-validate-type-label-mime-mismatch`：文件类型不符合要求的提示信息。
- `file-validate-type-label-max-file-size-exceeded`：文件大小超过限制的提示信息。
- `file-validate-type-label-min-file-size`：文件大小不足的提示信息。
- `file-validate-type-label-max-file-size`：文件大小超过限制的提示信息。
- `init`：用于处理FilePond组件的初始化逻辑。

最后，需要在Vue组件中定义一些方法，例如：

export default {
  data() {
    return {
      files: []
    }
  },
  methods: {
    handleFilePondInit() {
      console.log('FilePond has initialized')
    }
  }
}

上面的代码中，我们定义了一个`files`数组，用于存储已选择的文件。还定义了一个`handleFilePondInit`方法，用于处理FilePond组件的初始化逻辑。

至此，一个基于Vue2和FilePond的多文件上传的实现就完成了。需要注意的是，代码中的服务器处理逻辑需要根据实际情况进行编写。