从0开始vue3+ElementUI创建wap页面 唤起手机相机功能 路由传递参数到下一页

安装node:

node的国内镜像：

如何安装vue3?

进入新目录：

安装vue3:

使用vue cli 安装vue3项目：

启动命令：

展示：

安装elementUI        ：

引入elementUI：

创建HomePage.vue:

修改App.vue:

wap唤起手机相机：

展示：

代码：
 

<template>
  <div class="home-page">
    <h1>请点击拍照</h1>
    <!-- 文件输入框，用于唤起相机 -->
    <input
      ref="fileInput"
      type="file"
      accept="image/*"
      capture="environment"
      @change="handleImageUpload"
      style="display: none"
    />
    <!-- 点击 + 号，触发文件输入框的点击事件 -->
    <div class="camera-icon" @click="triggerFileInput">
      <el-icon><Plus /></el-icon>
    </div>
    <!-- 预览上传的照片 -->
    <img v-if="previewImage" :src="previewImage" alt="Preview" class="preview-image" />
  </div>
</template>

<script>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';

export default {
  name: 'HomePage',
  components: {
    Plus,
  },
  setup() {
    const fileInput = ref(null);
    const previewImage = ref(null);

    // 触发文件输入框
    const triggerFileInput = () => {
      fileInput.value.click();
    };

    // 处理上传的图片
    const handleImageUpload = (event) => {
      const file = event.target.files[0];
      if (file) {
        previewImage.value = URL.createObjectURL(file); // 生成图片预览
      }
    };

    return {
      fileInput,
      triggerFileInput,
      handleImageUpload,
      previewImage,
    };
  },
};
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 18px;
  background-color: #f9f9f9;
}

h1 {
  margin-bottom: 20px;
}

.camera-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #007bff;
  color: white;
  font-size: 36px;
  cursor: pointer;
}

.preview-image {
  margin-top: 20px;
  max-width: 90%;
  border-radius: 8px;
}
</style>

如果点击拍照后，将照片放在下一页NextPage.vue中展示：

安装vue-router:

router/index.js 路由文件：

NextPage.vue中接收参数：

引入路由：

路由文件： router/index.js

App.vue：非常重要！！

源码：

App.vue:

<template>
 <router-view />
</template>

<script>

export default {
  name: 'App',
  components: {
  
  }
}
</script>

rouer/index.js

import {
	createRouter,
	createWebHistory
} from 'vue-router';
import HomePage from '../components/HomePage.vue';
import NextPage from '../components/NextPage.vue';

const routes = [{
		path: '/',
		name: 'HomePage',
		component: HomePage,
	},
	{
		path: '/next',
		name: 'NextPage',
		component: NextPage,
	},
];

const router = createRouter({
	history: createWebHistory(),
	routes,
});

export default router;

main.js:
 

import {
	createApp
} from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');

HomePage.vue:
 

<template>
	<div class="home-page">
		<h1>请点击拍照</h1>
		<input ref="fileInput" type="file" accept="image/*" capture="environment" @change="handleImageUpload"
			style="display: none" />
		<div class="camera-icon" @click="triggerFileInput">
			<el-icon>
				<Plus />
			</el-icon>
		</div>

	
	</div>
</template>

<script>
	import {
		ref
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'; // 确保使用 useRouter
	import {
		Plus
	} from '@element-plus/icons-vue';

	export default {
		name: 'HomePage',
		components: {
			Plus,
		},
		setup() {
			const fileInput = ref(null);
			const router = useRouter(); // 调用 useRouter 获取 router 实例

			const triggerFileInput = () => {
				fileInput.value.click();
			};

			const handleImageUpload = (event) => {
				const file = event.target.files[0];
				if (file) {
					const photoURL = URL.createObjectURL(file);
					router.push({
						name: 'NextPage',
						query: {
							photo: photoURL
						}
					}); // 跳转到 NextPage
				}

			};


	

	


			return {
				fileInput,
				triggerFileInput,
				handleImageUpload,
				
			};
		},
	};
</script>


<style scoped>
	.home-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		font-size: 18px;
		background-color: #f9f9f9;
	}

	h1 {
		margin-bottom: 20px;
	}

	.camera-icon {
		width: 60px;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #007bff;
		color: white;
		font-size: 36px;
		cursor: pointer;
	}

	.preview-image {
		margin-top: 20px;
		max-width: 90%;
		border-radius: 8px;
	}
</style>

NextPage.vue:
 

<template>
	<div class="next-page">
		<h1>拍摄的照片</h1>
		<!-- 显示从上一页传递过来的图片 -->
		<img v-if="photo" :src="photo" alt="Captured Photo" class="captured-photo" />
		
	</div>
</template>

<script>
	import {
		useRoute
	} from 'vue-router';

	export default {
		name: 'NextPage',
		setup() {
			const route = useRoute();
			const photo = route.query.photo; // 获取从上一页传递的照片 URL
			
			return {
				photo,
				
			};
		},
	};
</script>

<style scoped>
	.next-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f9f9f9;
	}

	h1 {
		margin-bottom: 20px;
	}

	.captured-photo {
		max-width: 90%;
		border-radius: 8px;
	}
</style>