FilePond文件上传插件

使用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,默认开启上传成功后自动回调，就是上传成功后就会执行删除

下面是我重新构造的参数

server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
          // fieldName is the name of the input field
          // file is the actual file object to send
          const formData = new FormData()
          formData.append(fieldName, file, file.name)

          const request = new XMLHttpRequest()
          request.open('POST', 'http://localhost:8081/upload/uploadFile')

          // Should call the progress method to update the progress to 100% before calling load
          // Setting computable to false switches the loading indicator to infinite mode
          request.upload.onprogress = (e) => {
            progress(e.lengthComputable, e.loaded, e.total)
          }

          // Should call the load method when done and pass the returned server file id
          // this server file id is then used later on when reverting or restoring a file
          // so your server knows which file to return without exposing that info to the client
          request.onload = function () {
            if (request.status >= 200 && request.status < 300) {
              // the load method accepts either a string (id) or an object
              // 这个是上传文件时的加载，加载执行完后会进入revert也就是删除
              load(request.responseText)
              console.log(request.responseText)
            } else {
              // 失败的话进入
              // Can call the error method if something is wrong, should exit after
              error('oh no')
            }
          }

          request.send(formData)

          // Should expose an abort method so the request can be cancelled
          return {
            abort: () => {
              // 点击取消进入该方法
              // This function is entered if the user has tapped the cancel button
              request.abort()

              // Let FilePond know the request has been cancelled
              abort()
            }
          }
        },
	// 如何不把他设置为空，执行完上传就会执行下面这个删除操作，如果真好需要直接填写参数即可，不做任何处理否则会报错
        revert: null
      }

文章还在更新最新进度请查看版权地址