图片上传组件 (c-upLoadImgs)

图片上传组件封装了多图上传、预览和删除功能，基于 uView 的 u-upload 组件进行二次封装，使用更加便捷。

基本用法

<template>
  <view>
    <c-upLoadImgs :file.sync="fileList" :maxCount="3"></c-upLoadImgs>
  </view>
</template>

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

回显模式

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

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

自定义尺寸

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

<template>
  <view>
    <c-upLoadImgs :file.sync="fileList" width="300rpx" height="300rpx"></c-upLoadImgs>
  </view>
</template>

上传视频

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

<template>
  <view>
    <c-upLoadImgs :file.sync="videoList" accept="video" :maxCount="1"></c-upLoadImgs>
  </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'

图片预览

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

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

内部方法

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

• handleImg(newValue): 处理输入的图片数据格式
• deletePic(e): 删除图片时调用
• afterRead(event): 读取新上传的图片
• uploadFilePromise(url): 上传图片到服务器
• previewImg(): 预览图片

注意事项

1. 组件依赖于 uView 的 u-upload 组件，确保项目中已引入 uView UI 库
2. 上传接口默认为 /common/upload，如需修改请在组件内部的 uploadFilePromise 方法中更改
3. 组件会自动处理服务器返回的路径，通过 vuex 中的 vuex_imgUrl 变量拼接完整路径
4. 上传时会显示上传中的状态提示
5. 文件上传成功后，会在 1 秒后更新状态

样式说明

组件内部样式设置：

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