腾讯云上传组件 (c-upload-cloud)

腾讯云上传组件封装了多图上传、预览和删除功能，基于 uView 的 u-upload 组件进行二次封装，并集成了腾讯云存储服务，使用更加便捷。

基本用法

<template>
  <view>
    <c-upload-cloud :file.sync="imageList"></c-upload-cloud>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    }
  }
}
</script>

多图上传

<template>
  <view>
    <c-upload-cloud :file.sync="imageList" :maxCount="9"></c-upload-cloud>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    }
  }
}
</script>

回显模式

回显模式下只显示图片而不能进行修改操作。

<template>
  <view>
    <c-upload-cloud :file="['path/to/image1.jpg', 'path/to/image2.jpg']" :echo="true"></c-upload-cloud>
  </view>
</template>

自定义尺寸

可以自定义上传组件的宽度和高度。

<template>
  <view>
    <c-upload-cloud :file.sync="imageList" width="300rpx" height="300rpx"></c-upload-cloud>
  </view>
</template>

上传视频

组件也支持上传视频文件。

<template>
  <view>
    <c-upload-cloud :file.sync="videoList" accept="video" :maxCount="1"></c-upload-cloud>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: []
    }
  }
}
</script>

属性说明

属性名	类型	默认值	说明
accept	String	'image'	上传文件格式，可选值：'image'、'video'
maxCount	Number | String	1	最多上传数量
width	Number | String	'200rpx'	上传框宽度
height	Number | String	'200rpx'	上传框高度
file	Array | String	[]	文件字段，使用时加上 .sync 修饰符（file.sync）
deletable	Boolean	true	是否可以删除
echo	Boolean	false	回显模式，不能修改
format	String	'Array'	返回数据格式，可选值：'Array'、'String'
maxSize	Number | String	10 * 1024 * 1024	限制图片上传大小，默认 10MB

事件说明

组件通过 :file.sync 实现双向绑定，上传成功或删除文件后会自动更新绑定的数据。

数据格式

输入格式

file 属性接受以下几种格式：

1. 数组格式：['image1.jpg', 'image2.jpg']
2. 字符串格式（逗号分隔）：'image1.jpg,image2.jpg'
3. 单个字符串：'image.jpg'

输出格式

根据 format 属性的设置，组件会返回不同格式的数据：

• 当 format="Array" 时，返回数组格式：['image1.jpg', 'image2.jpg']
• 当 format="String" 时，返回逗号分隔的字符串：'image1.jpg,image2.jpg'

上传进度

组件支持显示文件上传进度：

• 上传过程中会显示进度百分比，例如：上传中(75%)
• 上传完成后会自动更新状态并显示预览

图片预览

组件支持点击图片预览功能：

• 在回显模式下，点击图片可以预览全部图片
• 在上传模式下，可以通过 u-upload 组件的 previewFullImage 属性控制是否可以预览（默认为 true）

内部方法

组件内部包含以下主要方法：

• handleImg(newValue): 处理输入的图片数据格式
• deletePic(e): 删除图片时调用
• afterRead(event): 读取新上传的图片
• camSafeUrlEncode(str): URL 编码处理
• previewImg(): 预览图片

腾讯云存储

组件内部使用 COS.js 实现腾讯云存储上传功能：

• 上传文件时会调用 COS.uploadFileToTencentClound 方法
• 支持实时获取上传进度并更新显示
• 上传失败时会显示错误提示

注意事项

1. 组件依赖于 uView 的 u-upload 组件，确保项目中已引入 uView UI 库
2. 需要引入 COS.js 文件以支持腾讯云存储上传
3. 组件会自动处理服务器返回的路径，通过 vuex 中的 vuex_imgUrl 变量拼接完整路径
4. 上传过程中会显示上传进度百分比
5. 上传失败时会有错误提示

样式说明

组件内部样式设置：

• 上传预览区域 margin 为 0
• 回显模式下的图片容器使用 flex 布局，支持换行
• 每个图片项右边距和下边距为 10rpx