vue3如何铺设背景图 以及 上传图片 唤起手机相机

图片存放位置：

css设置：

最终展示：

源码：

<template>
	<div class="home-container">

  <div class="home-page">
	<h1>******项目</h1>
    <h3>请拍摄或上传一张照片</h3>
    <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>
</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>
body{margin:0}
</style>
<style scoped>

.home-container {
  background-image: url('@/assets/city.jpg'); /* 设置背景图片 */
  background-size: cover; /* 背景覆盖整个容器 */
  background-position: center; /* 背景居中 */
  height: 100vh; /* 设置高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top:25vh;
}


.home-title {
  
  text-align: center;
}

.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 5px;
  font-size: 18px;
  padding: 10px 20px;
  opacity:0.85
}

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;
  margin-bottom: 20px;
}

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