技術標籤：javaVuejavascriptvue.js前端vuejava

使用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
      }

文章還在更新最新進度請檢視版權地址