Vue调用原生相机拍照或手机相册上传图片

最新推荐文章于 2024-10-12 10:55:25 发布

YoungMan_09

最新推荐文章于 2024-10-12 10:55:25 发布

阅读量4.7k

点赞数 3

文章标签： html 前端 javascript vue.js

本文链接：https://blog.csdn.net/YoungMan_09/article/details/125937458

版权

本文介绍了如何在Vue项目中利用Vant UI库的Uploader组件，实现调用用户手机的相机功能进行拍照，或者从相册选择图片进行上传的操作。通过示例展示了功能实现的具体步骤和效果。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <input
      id="upload_file"
      type="file"
      style="display: none"
      accept="image/*"
      name="file"
      @change="fileChange($event)"
    />
    <div class="image-item space" @click="showActionSheet()">
      <div class="image-up"></div>
    </div>

    <div class="upload_warp">
      <div class="upload_warp_img">
        <div
          class="upload_warp_img_div"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <!-- <div class="upload_warp_img_div_top">
          <img
            src="../assets/addbth.png"
            class="upload_warp_img_div_del"
            @click="fileDel(index)"
          />
        </div> -->
          <img
            v-if="index == imgList.length - 1 || imgList.length == 0"
            :src="item.file.src"
            style="display: inline-block"
            class="pic"
          />
        </div>
        <div
          clas