filepool

filepool / 文件上传池

Features

• √ v-model双绑
• √ 支持分片上传/断点续传
• √ 支持上传进度显示、中途取消
• √ 支持格式限制/大小限制/数量限制 可针对不同类型分别设置
• √ 自动根据数量限制选择string或array数据类型 也可以手动指定
• √ 支持拖拉拽排序（响应式）
• √ 支持上传后预览/禁用时预览
• √ 全局安装/局部引入 通用参数仅需配置一次

element-ui集成说明：

• element-ui是以外置依赖的方式引入的 所以不必担心代码体积和版本不一致等问题
• 适配element-ui的el-form组件 支持el-form的全局disabled

Installation

$ yarn add filepool

Dependencies：vue element-ui axios?

// sliceFile, MB, GB 仅作为工具函数、常量 可选
import Filepool, { sliceFile, MB, GB } from 'filepool'

// 组件内引入
components: { Filepool }

// 全局引入
Vue.use(Filepool)

Usage

<Filepool v-model="" fileType="video"/>

Attribute	Description	Configuration Mode	Type	Accepted Values	Default
value / v-model	文件链接	props	string / array
disabled	是否禁用	props	boolean		false
fileTypeCatalog	文件目录	global	object		see below
fileType	指定使用fileTypeCatalog中的哪一个	props	string, array	prop of fileTypeCatalog
valueType	数据类型	global, props	string	'string' / 'array'	see below
maxSize	大小限制 单位MB	global, props	number		200
count	数量限制	global, props	number		1
viewText	查看按钮文字	props	string		点击查看
delConfirmation	是否在删除文件时弹框确认	global	boolean		false
base64Encoding	在没有配置request时，是否将文件进行base64编码	global, props	boolean		false
placeholder	提示信息（hint）	global, props	string		'点击上传'
viewFile	点击查看按钮时的预览方法	props	function		undefined

接口相关

由于分片上传的实现由后端主导 五花八门 无法统一 故上传的整个过程放开自定义 谢绝过度封装

Attribute	Description	Configuration Mode	Type	Accepted Values	Default
upload	自定义上传的整个过程	global, props	function	see below
onAbort	回调 在上传中途点击取消按钮触发	global, props	function	see below

upload

import Filepool from 'filepool'
import request from '@/utils/request' // 你的axios封装

Vue.use(Filepool, {
  upload ({ file, jsonToFormData, }) {
    return new Promise((resolve, reject) => {
      request({
        url: '',
        method: 'POST',
        data: jsonToFormData({
          file,
        }),
      }).then(res => {
        if (typeof res?.data === 'string') {
          resolve(res.data)
        } else {
          reject(res.message)
        }
      }).catch(e => {
        reject(e)
      })
    })
  },
})

相对完整的分片上传示例

含中途取消、进度显示、断点续传等

import Filepool from 'filepool'
import request from '@/utils/request' // 你的axios封装
import { CancelToken } from 'axios'

let cancelUpload, failTimes = 0, retryTimes = 3

Vue.use(Filepool, {
  /**
   * @return {promise}
   */
  upload ({
    file, // 用户选择的二进制文件
    
    fileType, // 当前实例的文件类型
    
    /**
     * json转FormData
     *
     * @param {json} param - 参数
     * @return {formData} formData格式的参数
     */
    jsonToFormData,
    
    /**
     * 设置上传进度
     *
     * @param {number} progress - 进度 范围[0, 1]
     */
    setProgress,
    
    /**
     * 切割文件（分片上传时有用）
     *
     * @param {file} file - 二进制文件
     * @param {number} chunkSize - 分片大小 单位字节 默认10M
     * @return {array} 文件分片
     */
    sliceFile,
    
    MB, GB, // 文件容量单位 方便用于chunkSize参数
  }) {
    const chunkSize = 10 * MB

    setProgress(0)
    failTimes = 0
    cancelUpload = null

    let chunks = sliceFile(file, chunkSize), count = 0
    
    const formData = jsonToFormData({
      domainId: 4,
      dir: fileType,
      chunkTotal: chunks.length.toString(),
      fileName: file.name,
    })

    return new Promise((resolve, reject) => {
      function recursion () {
        formData.set('file', chunks[count])
        formData.set('chunk', count.toString())
        request({
          baseURL: '',
          url: '',
          method: 'POST',
          data: formData,
          timeout: 0,
          onUploadProgress (progressEvent) {
            if (progressEvent.lengthComputable) {
              const pct = (chunkSize * count + progressEvent.loaded) / file.size
              setProgress(pct >= 1 ? .99 : pct)
            }
          },
          cancelToken: new CancelToken(function executor (c) {
            // executor 函数接收一个 cancel 函数作为参数
            cancelUpload = c
          }),
        }).then(res => {
          let data = 'data' in res ? res.data : res
          if (data?.status === '200') {
            setProgress(1)
            resolve(data.url)
          } else if (count++ < chunks.length - 1) {
            formData.set('taskId', data.url)
            recursion()
          } else {
            setProgress(1)
            reject('上传失败')
          }
        }).catch(e => {
          // 断点续传
          if (failTimes++ < retryTimes) {
            recursion()
          } else {
            reject('上传失败')
          }
        })
      }

      recursion()
    })
  },
  onAbort () {
    // 在上传中途点击取消按钮触发
    // 可以在这里重置断点续传次数、中止请求、调接口清除分片文件等
    failTimes = Number.MAX_VALUE
    cancelUpload?.()
  }
})

显示文件原始名称

将文件上传成功后的文件链接改为如下形式即可

resolve(`${res.data.url}?fileName=${file.name}`)

文件形态

• 服务器模式：配置了upload时进入该模式
• 离线模式：没有配置upload时进入该模式
  • 二进制File：默认
  • base64: base64Encoding设置为true时进入该模式

文件数据类型

• auto（默认）: count为1时采用string，count>1时采用array
• string: 字符串类型，count为1时采用string，count＞1时采用json-string
• array: 数组类型

文件目录

你可以全局定义一个文件目录 预设一些你可能用到的文件类型（任何类型都可以） 并规定这些类型的格式和大小 在组件中使用fileType属性来对应

默认值

fileTypeCatalog: {
  image: {
    maxSize: 10,
    accept: '.jpg,.jpeg,.png',
  },
  video: {
    maxSize: 200,
    accept: '.mp4',
  },
  audio: {
    maxSize: 60,
    accept: '.mp3',
  },
  apk: {
    maxSize: 200,
    accept: '.apk',
  },
  excel: {
    maxSize: 100,
    accept: '.xlsx,.xls',
  },
}

例子

<template>
  <Filepool fileType="abc"/>
</template>

<script>
import Filepool from 'filepool'

Vue.use(Filepool, {
  fileTypeCatalog: {
    abc: {
      maxSize: 10,
      accept: '.abc',
    },
  }
})
</script>

获取上传进度/状态

1. 添加一个ref如filepool
2. this.$refs.filepool?.progress < 1 // 小于1表示上传中，等于1表示未开始/上传完毕

获取文件上传原始信息

监听事件 filesChange 即可

Notice

• 全局配置被props中的同名参数覆盖 对象会进行混入

• maxSize权重排序：props ＞ fileTypeCatalog中对应的maxSize ＞ 全局默认的maxSize

• 如果仅上传图片 请使用imgpond（附带图片编辑功能）

• fileType如果为array类型 必须以引用data中变量的形式来传入

  • 这是因为每次父组件重渲染时 直接写在template中的引用型变量会被重新创建 导致意外触发组件内的监听
  • 详见 https://github.com/vuejs/vue/issues/9223