uniapp 小程序 实时拍照（仅拍照）限制上传5张 可预览 可删除

**实时拍照小程序**

本文将介绍如何在 UniApp 中实现一个实时拍照的小程序，用户可以拍摄照片并预览、删除或上传至服务器。限制上传张数为5 张。

### **功能需求**

1. 实时拍照2. 预览照片3. 删除照片4.限制上传张数（最多5 张）

### **实现步骤**

#### **1. 创建 UniApp项目**

首先，需要在 HBuilderX 中创建一个新的 UniApp项目。

#### **2. 安装必要的插件**

在 `uni-app` 的 `build` 目录下，安装 `@dcloudio/webpack-plugin-alias` 和 `@dcloudio/webpack-plugin-html-webpack-plugin` 插件：

bashnpm install @dcloudio/webpack-plugin-alias @dcloudio/webpack-plugin-html-webpack-plugin -D

javascriptmodule.exports = {
 // ...
 plugins: [
 new webpackPluginAlias({
 '@': path.resolve(__dirname, 'src'),
 }),
 new HtmlWebpackPlugins({
 template: path.join(__dirname, 'index.html'),
 }),
 ],
};

javascript// src/components/camera.vue<template>
 <view class="camera">
 <!-- 拍照按钮 -->
 <button @click="takePhoto">拍照</button>

 <!-- 预览区域 -->
 <image v-if="previewImage" :src="previewImage" mode="aspectFit"></image>

 <!-- 删除按钮 -->
 <button @click="deletePhoto">删除</button>
 </view>
</template>

<script>
export default {
 data() {
 return {
 previewImage: '',
 };
 },
 methods: {
 takePhoto() {
 // 实时拍照 uni.takePhoto({
 count:5, //限制上传张数 success: (res) => {
 this.previewImage = res.tempFilePath;
 },
 });
 },
 deletePhoto() {
 // 删除照片 this.previewImage = '';
 },
 },
};
</script>

<style>
.camera {
 /* 样式 */
}
</style>

javascript// src/app.vue<template>
 <view class="container">
 <!-- 拍照区域 -->
 <camera :previewImage.sync="previewImage" />
 </view>
</template>

<script>
import camera from './components/camera.vue';

export default {
 components: { camera },
};
</script>

<style>
.container {
 /* 样式 */
}
</style>