更新记录

1.0.0（2025-11-06） 下载此版本

初次版本

平台兼容性

uni-app(4.08)

uni-app x(4.08)

其他

zmt-duo-image-upload

UniApp多张图片上传插件，支持上传、预览、删除和数据回显功能。

功能特点

• 支持多张图片选择与上传
• 图片预览与删除
• 上传进度显示
• 数据回显，便于编辑场景使用
• 可控制最多上传图片数量

安装

将插件直接导入到uni_modules目录下即可。

使用方法

1. 无需引入，直接使用即可

<template>
  <view class="container">
    <zmt-duo-image-upload 
      :max-count="5" 
      v-model="imageList"
      @change="onImageChange"
    ></zmt-duo-image-upload>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 初始图片列表，用于数据回显
      imageList: [
        {
          url: 'https://example.com/image1.jpg',
          fileID: 'https://example.com/image1.jpg'
        },
        {
          url: 'https://example.com/image2.jpg',
          fileID: 'https://example.com/image2.jpg'
        }
      ]
    };
  },
  methods: {
    // 图片列表变化时触发
    onImageChange(list) {
      console.log('图片列表变化:', list);
      this.imageList = list;
    }
  }
};
</script>

属性说明

事件说明

注意事项

1. 使用前请确保已正确配置uniCloud环境
2. 上传的图片将存储在uniCloud默认存储空间
3. 图片显示尺寸固定为300px * 300px，如果想修改图片回显的尺寸，可以修改一下css样式：

.image-item {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 8rpx;
  overflow: hidden;
  flex-shrink: 0; /* 防止图片被压缩 */
  border:1px dashed #eee;
  margin-left:5px;
  margin-right:5px;
}

.upload-btn {
  width: 300px;
  height: 300px;
  border: 1px dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  flex-shrink: 0; /* 防止按钮被压缩 */
}