文件上传

• 安装模块

  npm install m-uploader 或 yarn add m-uploader

• 引用模块

  import m_uploader from 'm-uploader'

• 通过代理拦截进行初始化配置

  const handler = {
    construct(target, [config = {}] = args) {
      Object.assign(config, {
        headers: {
          'Authorization': localStorage.getItem('AUTH_TOKEN')
        },
        configUrl: '/api/upload/getTmpKey'  // 获取腾讯COS上传文件相关配置信息的请求API
      })
      return new target(config)
    }
  }
  const Uploader = new Proxy(m_uploader, handler)
  export default Uploader

• 创建文件选择容器并设置ID选择器

  <input type="file" id="fileInput" multiple>

  默认单个上传，通过添加 multiple 属性支持多文件上传

• 通过HTML属性的方式添加类型校验

  <input type="file" accept=".mp4, .mov">
  <input type="file" accept=".png, .jpg, .jpeg, .gif">

  <!-- .xlsx 的 excel 文件 -->
  <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
  <!-- .zip 的 zip 压缩包文件 -->
  <input type="file" accept="application/zip">

• 创建实例并获取文件对象

  /**
  * @param {String} selector CSS的ID选择器
  * @param {Object} headers 自定义请求头
  * @param {String} configUrl 获取腾讯COS或火山TOS上传文件相关配置信息的请求API
  * @param {Boolean} isVideoCover 是否生成视频封面，默认值为 false，不生成
  * @param {Boolean} isHashByMd5 是否生成文件的 md5，默认值为 false，不生成
  * @param {Function} callback 回调函数，接收选取的文件对象
  */
  const uploader = new Uploader({
    selector: 'CSS的ID选择器',
    callback: function getFileList(files) {
      console.log('原始文件对象', files)
    }
  })

• 截取视频文件封面

  const uploader = new Uploader({
    isVideoCover: true,  // 默认值为 false
    isHashByMd5: true,  // 默认值为 false
    selector: 'CSS的ID选择器',
    callback: function getFileList(files) {
      console.log('原始文件对象', files)
    }
  })

  在拿到响应数据后，在视频地址的 url 后边拼接 _poster 就可以获取对应视频的封面

• 类型校验并生成文件相关信息

  视频文件，支持 mp4 和 mov 格式

  uploader.beforeUpload({ type: 'video', files })
    .then(filesInfo => {
      console.log('包含原始文件对象和文件信息', filesInfo)
    })

  [
    {
      data: {
        filename: '文件名称',
        filetype: '文件类型',
        filesize: '文件大小',
        width: '文件宽度',
        height: '文件高度',
        duration: '文件时长',
        metamd5: '文件MD5',
        localURL: '本地内存引用地址',
      },
      file: File
    }
  ]

  图片文件，支持 png、jpg、jpeg 和 gif 格式

  uploader.beforeUpload({ type: 'image', files })
    .then(filesInfo => {
      console.log('包含原始文件对象和文件信息', filesInfo)
    })

  [
    {
      data: {
        filename: '文件名称',
        filetype: '文件类型',
        filesize: '文件大小',
        width: '文件宽度',
        height: '文件高度',
        metamd5: '文件MD5',
        localURL: '本地内存引用地址',
      },
      file: File
    }
  ]

  Excel 文件和 Zip 压缩包（只支持类型的校验和上传的表单数据生成，不支持 COS 和 TOS 上传）

  uploader.beforeUpload({ type: 'excel', files })
    .then(async files => {
      console.log('原始文件对象', files)
      const fm = await uploader.getFormData(files, data)
      console.log('可用于上传的表单数据', fm)
    })

  uploader.beforeUpload({ type: 'zip_package', files })
    .then(async files => {
      console.log('原始文件对象', files)
      const fm = await uploader.getFormData(files, data)
      console.log('可用于上传的表单数据', fm)
    })

  说明：data 表示业务附加参数，不需要可不传

• 上传文件到服务器

  uploader.upload({
    data: filesInfo,
    getProgress({ percentage, uploadRate, timeRemaining }) {
      console.log('上传进度', `${percentage}%`)
      console.log('上传速率', uploadRate)
      console.log('剩余时间', timeRemaining)
    },
    getUploadCount({ uploadSuccessCount, uploadFailCount }) {
      console.log('上传成功的数量', uploadSuccessCount)
      console.log('上传失败的数量', uploadFailCount)
    }
  })
  .then(data => {
    console.log('上传完成后的结果数据', data)
  })

  视频文件（video）

  [
    {
      filename: '文件名称',
      filetype: '文件类型',
      filesize: '文件大小',
      width: '文件宽度',
      height: '文件高度',
      duration: '文件时长',
      metamd5: '文件md5',
      url: '文件资源地址',
    }
  ]

  图片文件（image）

  [
    {
      filename: '文件名称',
      filetype: '文件类型',
      filesize: '文件大小',
      width: '文件宽度',
      height: '文件高度',
      metamd5: '文件md5',
      url: '文件资源地址',
    }
  ]

• 手动释放本地内存地址引用

  uploader.revokeLocalURL(filesInfo)

• 完整示例

  import m_uploader from 'm-uploader'

  const handler = {
    construct(target, [config = {}] = args) {
      Object.assign(config, {
        headers: {
          'Authorization': localStorage.getItem('AUTH_TOKEN')
        },
        configUrl: '/api/upload/getTmpKey'
      })
      return new target(config)
    }
  }
  const Uploader = new Proxy(m_uploader, handler)

  const uploader = new Uploader({
    selector: 'CSS的ID选择器',
    callback: async function getFileList(files) {
      console.log('原始文件对象', files)
      try {
        const filesInfo = await uploader.beforeUpload({ type: 'video', files })
        console.log('包含原始文件对象和文件信息', filesInfo)
        const data = await uploader.upload({
          data: filesInfo,
          getProgress({ percentage, uploadRate, timeRemaining }) {
            console.log('上传进度', `${percentage}%`)
            console.log('上传速率', uploadRate)
            console.log('剩余时间', timeRemaining)
          },
          getUploadCount({ uploadSuccessCount, uploadFailCount }) {
            console.log('上传成功的数量', uploadSuccessCount)
            console.log('上传失败的数量', uploadFailCount)
          }
        })
        console.log('上传完成后的结果数据', data)
      } catch(error) {
        console.log('error', error)
        if (error.valid && error.valid === false) {
          console.log('文件类型校验不通过，请确认文件的正常性！')
        }
      }
    }
  })