更新记录

1.0.1（2020-12-03） 下载此版本

1.0.1 修复删除时函数名和上传操作一样

1.0.0（2020-11-30） 下载此版本

1.0.0 完成初步功能测试

平台兼容性

pretty-uploadFile 图片上传组件

一个功能强大的 uni-app 图片和文件上传组件，支持图片压缩、裁剪、预览大图、批量上传等功能。

✨ 功能特性

• 📷 图片上传：支持从相册或相机选择图片
• 🚀 批量上传：支持多图选择，批量处理（NEW）
• 📄 文件上传：支持上传 PDF 等文件
• ✂️ 图片裁剪：内置裁剪组件，支持自由裁剪
• 🗜️ 图片压缩：自动压缩图片，可自定义压缩质量
• 👁️ 预览大图：支持多图浏览、长按保存
• 🗑️ 删除文件：一键删除已上传文件
• 📊 上传进度：实时显示上传状态
• 🔢 数量限制：可配置上传文件数量上限
• 🌟 本地模式：支持纯本地预览，无需服务器

📦 组件结构

pretty-uploadFile/
├── pretty-uploadFile.vue     # 主组件
├── pretty-uploadFile.css     # 样式文件
├── image-cropper.vue         # 图片裁剪组件
└── README.md                 # 使用文档

🚀 快速开始

基础使用（单图模式）

<template>
  <view>
    <upload 
      :limitnumber="5"
      @upload="handleUpload"
      @deletefile="handleDelete">
    </upload>
  </view>
</template>

<script>
import upload from '@/components/pretty-uploadFile/pretty-uploadFile.vue'

export default {
  components: { upload },
  methods: {
    handleUpload(fileList) {
      console.log('文件列表:', fileList)
      // fileList 格式：
      // [{
      //   url: '图片地址',
      //   id: '文件ID',
      //   book: 'img' | 'file',
      //   uploading: true | false
      // }]
    },
    handleDelete(fileList) {
      console.log('删除后的文件列表:', fileList)
    }
  }
}
</script>

批量上传（多图模式）

<template>
  <view>
    <!-- 一次选择多张图片 -->
    <upload 
      :limitnumber="9"
      :multiple="true"
      :maxCount="9"
      :enableCompress="true"
      :localMode="true"
      @upload="handleUpload">
    </upload>
  </view>
</template>

<script>
export default {
  methods: {
    handleUpload(fileList) {
      console.log(`批量上传: ${fileList.length} 张图片`)
    }
  }
}
</script>

📖 Props 属性

🎯 使用场景

场景1：批量上传（多图快速上传）⭐ NEW

适用于需要快速上传多张图片的场景。

<upload 
  :limitnumber="9"
  :multiple="true"
  :maxCount="9"
  :enableCompress="true"
  :compressQuality="70"
  :localMode="true"
  @upload="uploadFile">
</upload>

适用： 商品图片、相册、文档扫描、活动照片

场景2：基础上传（自动压缩）

适用于普通图片上传，自动压缩图片减少流量消耗。

<upload 
  :limitnumber="5"
  :enableCompress="true"
  :compressQuality="80"
  :localMode="true"
  @upload="uploadFile">
</upload>

场景3：单图裁剪（精细调整）

适用于需要规范图片尺寸的场景，如头像上传。

<upload 
  :limitnumber="1"
  :multiple="false"
  :enableCompress="true"
  :compressQuality="85"
  :enableCrop="true"
  :localMode="true"
  @upload="uploadFile">
</upload>

适用： 头像、证件照、需要精确裁剪的场景

场景4：原图上传（不压缩）

适用于需要保留图片原始质量的场景。

<upload 
  :limitnumber="3"
  :multiple="false"
  :enableCompress="false"
  :localMode="true"
  @upload="uploadFile">
</upload>

适用： 证件照、高清图片、专业摄影

📡 Events 事件

⚙️ 配置服务器地址

在 App.vue 中配置服务器地址：

<script>
export default {
  globalData: {
    url: 'https://your-api-domain.com' // 替换为你的实际服务器地址
  }
}
</script>

📝 文件数据结构

{
  url: String,      // 图片地址（本地临时路径或服务器地址）
  id: String,       // 服务器返回的文件ID
  book: String,     // 文件类型：'img' 或 'file'
  uploading: Boolean // 是否正在上传
}