使用FilePond进行上传

<template>
  <div id="app">
    <file-pond
      name="test"
      ref="pond"
      <!-- 右下角版权-->
      credits="https://asource.top,Source"
      <!-- 提示-->
      label-idle="Drop files here..."
      是否支持上传多文件
      v-bind:allow-multiple="true"
      <!-- 支持的文件类型-->
      accepted-file-types="image/jpeg, image/png"
      <!-- 上传地址-->
      server="/api"
      <!-- 最大文件数-->
      maxFiles="1"
      <!-- 手动上传-->
      instantUpload="false"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"/>
  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond'

// Import FilePond styles
import 'filepond/dist/filepond.min.css'

// Import FilePond plugins
// Please note that you need to install these plugins separately

import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
// 需手动导入
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
// 需手动导入
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview)

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

      // FilePond instance methods are available on `this.$refs.pond`
    }
  },
  components: {
    FilePond
  }
}
</script>

最终效果

不喜欢可自定义样式或属性，官网

大部分的东西都是支持的官方展示

后端接口

然后就到了后端的接口

在后端接收参数时，需要在参数前添加@RequestPart("file")否则无法获取的到，这个可能是插件的底层对这个进行过处理默认采用的是XMLHttpRequest进行上传，要有需要注意的是前段的上传路劲也是经过处理的

我的写法是将它作为一个参数从新定义：

在这个server中我们是可以调用很多的参数的

server: {
	// 提交地址
        url: 'http://192.168.0.100',
	// 超时时间
        timeout: 7000,
	// 上传的方法
        process: {
            url: './process',
            method: 'POST',
            headers: {
                'x-customheader': 'Hello World'
            },
            withCredentials: false,
            onload: (response) => response.key,
            onerror: (response) => response.data,
            ondata: (formData) => {
                formData.append('Hello', 'World');
                return formData;
            }
        },
	// 删除方法
        revert: './revert',
	// 恢复
        restore: './restore/',
	// 加载
        load: './load/',
	// 获取
        fetch: './fetch/'
    }

如果不需要哪个就可以将它的值设置为null,默认开启上传成功后自动回调，就是上传成功后就会执行删除

Q.E.D.