vue中调用手机相机拍照功能

最新推荐文章于 2025-02-27 00:30:00 发布

xiaoqiancai

最新推荐文章于 2025-02-27 00:30:00 发布

阅读量277

点赞数 3

文章标签： vue.js 数码相机 javascript

本文链接：https://blog.csdn.net/xiaoqiancai/article/details/144231926

版权

<template>
    <div>
        <input type="file" accept="image/*" capture="camera" @change="handleFileChange" style="display:none"
            ref="cameraInput" />
          <div v-if="imageUrl">
            <img width="200" :src="imageUrl" alt="Captured Image" />
          </div>
          <el-button type="primary" @click="triggerCamera">拍照</el-button>
    </div>
</template>
import axios from 'axios'
export default{
    name:'XXX',
    data(){
        return {
            imageUrl:''
        }
    },
    methods: {
        triggerCamera() {
          this.$refs.cameraInput.click();
        },
        // 处理拍照后的图片
        handleFileChange(event) {
          const file = event.target.files[0];
          if (file) {
            const formData = new FormData(); 
            formData.append('file', file);
            // 使用FileReader读取图片数据
            const reader = new FileReader();
            reader.onload = (e) => {
               this.imageUrl = e.target.result; // 图片数据作为base64字符串
               axios.post('文件上传地址',formData)
              .then(res => {
                 //上伟成功
              })
            };
            reader.readAsDataURL(file); // 读取文件为Data URL
          }
        }
    }
}