更新记录

1.0.0（2025-10-24） 下载此版本

初次版本

平台兼容性

uni-app(3.8.11)

uni-app x(3.98)

其他

zmt-upload-image 图片上传组件

组件介绍

zmt-upload-image 是一个基于 Vue.js 和 uni-app 框架开发的图片上传组件，提供了简洁美观的界面和完整的上传功能。该组件支持从相册选择或拍照上传图片，并显示上传进度，适用于各种需要图片上传功能的场景。 组件直接上图片上传到dcloud云存储，直接返回上传后的路径。

特性

• 📸 支持相册选择和拍照上传
• 📊 显示实时上传进度条
• 🎨 简洁美观的界面设计
• 🔄 自动生成 UUID 文件名避免冲突
• 📱 响应式设计，适配各种屏幕尺寸
• ⚡ 支持图片压缩，提高上传效率
• 🚨 完善的错误处理和提示

使用方法

直接引入

<!-- 在需要使用的页面中直接引入组件 -->
<template>
  <view>
    <zmt-upload-image @success="handleUploadSuccess"></zmt-upload-image>
  </view>
</template>

<script>

export default {
  methods: {
    handleUploadSuccess(res) {
      console.log('上传成功', res)
    }
  }
}
</script>

基本使用

<template>
  <view class="container">
    <text class="title">图片上传示例</text>
    <zmt-upload-image
      @success="onUploadSuccess"
      @fail="onUploadFail"
    ></zmt-upload-image>
  </view>
</template>

<script>

export default {

  methods: {
    onUploadSuccess(res) {
      console.log('图片上传成功', res.fileID)
      // 这里可以处理上传成功后的逻辑
    },
    onUploadFail(err) {
      console.error('图片上传失败', err)
      // 这里可以处理上传失败后的逻辑
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
</style>

高级用法

1. 自定义尺寸

<template>
  <view>
    <zmt-upload-image 
      style="width: 80%; margin: 0 auto;"
      @success="handleUploadSuccess"
    ></zmt-upload-image>
  </view>
</template>

参数

无参数

Events

样式定制

可以通过以下方式定制组件样式：

.upload-container {
  width: 100%;
  aspect-ratio: 3.5 / 1; /* 宽高比 3.5:1，自动计算高度 */
  border: 2rpx dashed #ccc;
  background-color: #f9f9f9;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

兼容性

注意事项

1. uniCloud 依赖：该组件使用 uniCloud.uploadFile 进行文件上传，请确保你的项目已正确配置 uniCloud 环境。

2. 图片格式：支持常见的图片格式，如 JPG、PNG、GIF 等。

3. 图片大小：建议上传的图片大小不超过 10MB，过大的图片可能导致上传失败或性能问题。

4. 网络环境：在弱网络环境下，上传可能需要较长时间，请确保用户体验。

5. 权限：在 App 和小程序中，需要获取相机和相册权限才能正常使用。

常见问题

Q1: 上传失败怎么办？

A1: 请检查以下几点：

• 网络连接是否正常
• uniCloud 配置是否正确
• 图片大小是否超过限制
• 权限是否已获取

Q2: 如何自定义上传接口？

A2: 可以通过修改组件中的 uniCloud.uploadFile 部分，替换为自己的上传接口：

// 在 chooseImage 方法中替换上传逻辑
// 原代码：
uniCloud.uploadFile({
  // ...
})

// 替换为自定义上传：
uni.request({
  url: 'https://your-api.com/upload',
  method: 'POST',
  header: {
    'Content-Type': 'multipart/form-data'
  },
  formData: {
    file: tempFilePath
  },
  success(res) {
    // 处理上传成功逻辑
  },
  fail(err) {
    // 处理上传失败逻辑
  }
})

Q3: 如何限制上传图片的尺寸？

A3: 可以在选择图片后添加尺寸验证：

// 在 chooseImage 方法的 success 回调中添加：
success: (res) => {
  const tempFilePath = res.tempFilePaths[0];

  // 获取图片信息
  uni.getImageInfo({
    src: tempFilePath,
    success: (imageInfo) => {
      // 检查图片尺寸
      if (imageInfo.width < 1920 || imageInfo.height < 540) {
        uni.showToast({
          title: '图片尺寸不符合要求（至少1920*540）',
          icon: 'none'
        });
        return;
      }

      // 继续上传逻辑
      // ...
    }
  });
}