更新记录

1.2.3（2025-06-06） 下载此版本

新增

• 新增 uploadAll() 方法：支持通过 ref 调用，批量上传所有图片并返回 Promise
• 手动上传功能增强：提供更灵活的上传控制方式
• 完善文档：添加手动上传的详细使用示例和说明

优化

• 改进手动上传体验：支持点击图片或上传按钮触发上传
• 增强错误处理：uploadAll 方法提供详细的成功和失败信息
• 完善 API 文档：补充方法说明和使用示例

平台兼容性

uni-app

uni-app x

其他

lp-camera-image 基于camera的图片上传组件

版本：1.2.3

📖 介绍

lp-camera-image 是一个基于 uni-app camera 组件开发的专业图片上传插件，专为移动端拍照上传场景设计。与传统的 chooseImage 方式不同，本插件直接使用 camera 组件实现拍照功能，提供更流畅的用户体验。

✨ 核心特性

• 🎯 专业拍照体验：基于 camera 组件，提供原生级拍照体验
• 📱 多平台兼容：支持 App、H5、微信小程序等多个平台
• 🔄 Vue 双版本支持：同时兼容 Vue2 和 Vue3
• 📤 智能上传管理：支持自动上传和手动上传两种模式
• 📊 实时进度显示：上传进度实时显示在图片上
• 🖼️ 完整预览功能：支持图片预览、左右滑动、长按保存
• ⚙️ 高度可配置：丰富的配置选项满足不同需求
• 🎨 优雅的UI设计：现代化的界面设计，支持自定义样式

🚀 快速开始

安装

1. 在 HBuilderX 中打开您的 uni-app 项目
2. 复制 lp-camera-image 文件夹到项目的 uni_modules 目录下
3. 重新编译项目

基础用法

<template>
  <view class="container">
    <lp-camera-image 
      v-model="imageList" 
      :auto-upload="true"
      :upload-url="uploadUrl"
      :max-count="6"
      @success="onUploadSuccess"
      @fail="onUploadFail"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [],
      uploadUrl: 'https://your-api.com/upload'
    }
  },
  methods: {
    onUploadSuccess(event) {
      const { index, response } = event
      uni.showToast({
        title: '上传成功',
        icon: 'success'
      })
    },
    onUploadFail(event) {
      const { index, error } = event
      uni.showModal({
        title: '上传失败',
        content: error.message || '未知错误',
        showCancel: false
      })
    }
  }
}
</script>

📋 平台兼容性

Vue 版本支持

🔧 API 文档

Props 属性

Events 事件

Methods 方法

通过 ref 可以调用组件的以下方法：

💡 使用场景

1. 自动上传模式

适用于需要立即上传的场景，如实时图片处理、即时分享等。

<template>
  <lp-camera-image 
    v-model="images"
    :auto-upload="true"
    upload-url="https://api.example.com/upload"
    :header="{ 'Authorization': 'Bearer ' + token }"
    @success="handleSuccess"
  />
</template>

2. 手动上传模式

适用于需要批量处理或表单提交的场景。

<template>
  <view>
    <lp-camera-image 
      ref="cameraImage"
      v-model="images"
      :auto-upload="false"
      upload-url="https://api.example.com/upload"
    />
    <button @click="submitForm" type="primary">提交表单</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      formData: {}
    }
  },
  methods: {
    async submitForm() {
      try {
        // 先上传所有图片
        const uploadResults = await this.$refs.cameraImage.uploadAll()

        // 组装表单数据
        const formData = {
          ...this.formData,
          images: uploadResults
        }

        // 提交表单
        await this.submitFormData(formData)

        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
      } catch (error) {
        uni.showModal({
          title: '提交失败',
          content: error.message,
          showCancel: false
        })
      }
    }
  }
}
</script>

3. 高级配置

<template>
  <lp-camera-image 
    v-model="images"
    :max-count="6"
    :auto-upload="true"
    upload-url="https://api.example.com/upload"
    :header="uploadHeaders"
    camera-device="front"
    camera-flash="on"
    camera-frame-size="large"
    file-key-name="image"
    :success-delay="1000"
    :show-progress="true"
    @success="onSuccess"
    @fail="onFail"
    @progress=""
  />
</template>

<script>
export default {
  computed: {
    uploadHeaders() {
      return {
        'Authorization': `Bearer ${this.token}`,
        'Content-Type': 'multipart/form-data'
      }
    }
  },
  methods: {
    onSuccess({ index, response }) {
      console.log(`第${index + 1}张图片上传成功:`, response)
    },
    onFail({ index, error }) {
      console.error(`第${index + 1}张图片上传失败:`, error)
    },
    ({ index, progress }) {
      console.log(`第${index + 1}张图片上传进度: ${progress}%`)
    }
  }
}
</script>

🎨 样式自定义

组件提供了丰富的 CSS 类名，支持自定义样式：

/* 主容器 */
.lp-camera-image {
  /* 自定义样式 */
}

/* 图片列表 */
.lp-image-list {
  /* 自定义样式 */
}

/* 图片项 */
.lp-image-item {
  /* 自定义样式 */
}

/* 添加按钮 */
.lp-image-add {
  /* 自定义样式 */
}

/* 相机容器 */
.lp-camera-container {
  /* 自定义样式 */
}

🔍 常见问题

Q: 为什么选择 camera 组件而不是 chooseImage？

A: camera 组件提供了更专业的拍照体验，支持实时预览、闪光灯控制、前后摄像头切换等功能，更适合需要高质量拍照的场景。

Q: 如何处理上传失败的情况？

A: 组件会自动重试失败的上传，您也可以通过监听 fail 事件来自定义错误处理逻辑。

Q: 是否支持图片压缩？

A: 可以通过 cameraFrameSize 属性控制拍照分辨率，间接实现图片大小控制。

Q: 如何自定义上传请求？

A: 通过 header 属性可以设置请求头，fileKeyName 可以自定义文件字段名。

📝 更新日志

v1.2.3 (2024-12-19)

• ✨ 新增 uploadAll() 方法，支持批量上传并返回 Promise
• 🎯 增强手动上传功能，提供更灵活的控制方式
• 📚 完善文档和使用示例

v1.2.2 (2024-12-19)

• 🧹 代码清理，移除调试日志
• ⚡ 性能优化，提升运行效率
• 📦 完善插件配置

v1.2.1 (2024-12-19)

• 🎨 优化用户体验，上传成功时显示完整进度条
• 🐛 修复 HTTP 错误状态码处理问题
• 🔧 增强错误处理和响应式更新

查看完整更新日志

📄 许可证

MIT License

🤝 贡献

欢迎在评论区提交 Issue 和 Pull Request 来帮助改进这个项目。

📞 联系方式

如有问题或建议，请通过以下方式联系：

• QQ号: 1002778764
• 微信：lp543555

感谢使用 lp-camera-image！ 🎉