小程序使用miniprogram-file-uploader切片上传多文件存在文件名错误的问题

22 阅读1分钟

导致这个问题的原因,是miniprogram-file-uploader源码中配置属性合并时采用 Object.assign方法合并,导致全局的配置会被后面的覆盖

image.png

以下是创建继承类来修复这个问题

import Uploader from 'miniprogram-file-uploader'
import store from '@/store'

// 创建继承类来修复 fileName 共享问题
class FixedUploader extends Uploader {
  constructor(option = {}) {
    // 调用父类构造函数前先处理配置
    const fixedOption = { ...option }

    // 调用父类构造函数
    super(fixedOption)

    // 重新设置当前实例的配置,确保不修改全局 config
    this.config = { ...this.config, ...option }
  }
}

const baseUrl = uni.getAccountInfoSync().miniProgram.envVersion === 'trial' ? process.env.VUE_APP_BASE_URL_TRIAL : process.env.VUE_APP_BASE_URL

// 分块上传相关接口
const VERIFY_URL = baseUrl + '/gofs/file/getFileByMd5'
const UPLOAD_URL = baseUrl + '/gofs/file/uploadChunk'
const MERGE_URL = baseUrl + '/gofs/file/mergeChunk'

// 文件切块大小(MB)
const chunkSize = 2 * 1024 * 1024

export const uploadFile = ({ filePath, fileName, fileSize }) => {
  return new FixedUploader({
    chunkSize,
    tempFilePath: filePath,
    totalSize: fileSize,
    fileName: fileName,
    maxMemory: 200 * 1024 * 1024, // 最大上传大小
    verifyUrl: VERIFY_URL,
    uploadUrl: UPLOAD_URL,
    mergeUrl: MERGE_URL,
    testChunks: true,
    verbose: true,
    header: { [store.state.tokenName]: store.state.token },
    timeout: 120000
  })
}

export const getMediaName = (filePath) => {
  const splitList = filePath.split('/')
  return splitList[splitList.length - 1]
}