menu-mini/src/components/cu-upload-img-video/README.md

支持H5与小程序选择上传图片与视频,并且支持数量限制,图片,视频大小限制,自带图片视频的预览,也兼容了IOS在小程序中的预览

使用

      <cu-upload-img-video v-model="fileList"></cu-upload-img-video>

属性props

属性名	说明	类型	默认值	可选值
maxLength	最多上传多少个文件	Number	1
videoMaxSize	视频文件的最大大小,单位为M	Number	100
imgMaxSize	图片文件的最大大小,单位为M	Number	20
v-model	文件的字符串数组	Array	string[]
onlyShow	是否仅查看,为true时,不展示上传按钮	Boolean	false	true
onlyImg	是否只上传图片	Boolean	false	true

注意事项,需要自己实现upload.js中的上传逻辑,因为每个人的上传逻辑不太一样,就不做封装了

export const useUpload = async file => {
  function getRandom(num) {
    let random = Math.floor(
      (Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, num - 1)
    )

    return random
  }

  const fileUri = `${new Date().getTime()}${getRandom(10)}${file.name || ''}`

  const uploadFileFn = async arrayBuffer => {
    uni.showLoading({
      title: '上传中'
    })

    uni.hideLoading()

    return arrayBuffer

    // await http
    //   .request({
    //     url: uploadUrl.url,
    //     method: 'PUT',
    //     data: arrayBuffer // ArrayBuffer数据
    //   })
    //   .catch(err => {
    //     console.error('上传过程中发生错误', err)
    //     uni.showToast({
    //       title: '上传异常',
    //       icon: 'none'
    //     })
    //     uni.hideLoading()
    //   })
    //
    // uni.hideLoading()
    //
    // return fileConfig.fileUrl + fileUri
  }

  return new Promise((resolve, reject) => {
    // #ifdef MP-WEIXIN
    uni.showLoading({
      title: '读取中'
    })

    uni.getFileSystemManager().readFile({
      filePath: file.path,
      success: async res => {
        console.log('success=====', res)
        const url = await uploadFileFn(res.data)
        resolve(url)
      },
      fail: e => {
        console.log('fail----', e)
      }
    })
    // #endif

    // #ifdef H5
    // const reader = new FileReader()
    const url = URL.createObjectURL(file)
    resolve(url)
    console.log('file---', file)
    // reader.readAsArrayBuffer(file)
    // reader.onload = async () => {
    //   const arrayBuffer = reader.result
    //   const url = await uploadFileFn(arrayBuffer)
    //   resolve(url)
    // }
    // #endif
  })
}