c-upload 上传组件

c-upload 是基于 uView 的 u-upload 组件的封装，用于图片和视频上传，支持预览、裁剪等功能。

基础用法

<template>
  <c-upload
    :fileList="fileList"
    @afterRead="afterRead"
    @delete="deletePic"
    name="1"
    multiple
    :maxCount="10"
  ></c-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this[`fileList${event.name}`].length
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this[`fileList${event.name}`][fileListLen]
        this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data)
            }, 1000)
          }
        })
      })
    }
  }
}
</script>

Props

参数	说明	类型	默认值
accept	接受的文件类型 (all/media/image/file/video)	String	'image'
capture	图片或视频拾取模式	String/Array	['album', 'camera']
compressed	是否压缩视频 (accept=video时生效)	Boolean	true
camera	摄像头 (accept=video时生效, back/front)	String	'back'
maxDuration	视频最长拍摄时间(秒)	Number	60
uploadIcon	上传区域图标	String	'camera-fill'
uploadIconColor	上传区域图标颜色	String	'#D3D4D6'
useBeforeRead	是否开启文件读取前事件	Boolean	false
afterRead	读取后的处理函数	Function	null
beforeRead	读取前的处理函数	Function	null
previewFullImage	是否显示自带的图片预览功能	Boolean	true
maxCount	最大上传数量	String/Number	52
disabled	是否禁用	Boolean	false
imageMode	预览图片裁剪模式	String	'aspectFill'
name	标识符，回调中获取	String	''
sizeType	图片尺寸 (original/compressed)	Array	['original', 'compressed']
multiple	是否开启多选	Boolean	false
deletable	是否展示删除按钮	Boolean	true
maxSize	文件大小限制(byte)	String/Number	Number.MAX_VALUE
fileList	已上传的文件列表	Array	[]

Events

事件名	说明	回调参数
afterRead	读取后的处理函数	event
beforeRead	读取前的处理函数	event
oversize	文件超出大小限制	event
clickPreview	点击预览图片	event
delete	删除图片	event