Vant之手机端上传图片只允许拍照上传
1.开发拍照上传页面 - andImgCapture.vue，包含镜头翻转功能
<template>
<div>
<van-button
icon="plus"
type="primary"
:disabled="disabled"
@click.stop="clickCamera"
ref="uploadBtn"
>拍照上传</van-button
>
<div class="camera-content" v-show="cameraVisible">
<van-button
icon="cross"
class="close-photo"
type="primary"
@click.stop="stopVideoStream"
></van-button>
<video
class="camera-video"
ref="videoElement"
playsinline
webkit-playsinline
></video>
<van-button
icon="photograph"
class="take-photo"
@click.stop="capturePhoto"
></van-button>
<!-- 你可以使用适当的图标来表示切换摄像头 -->
<van-button
icon="share"
class="switch-camera"
@click.stop="switchCamera"
></van-button>
<canvas ref="canvasElement" style="display: none"></canvas>
</div>
<div class="captured-image-content" v-if="photoVisible">
<van-button class="cancel-photo" @click="cancelPhoto">取消</van-button>
<van-button class="confirm-photo" @click="confirmPhoto">完成</van-button>
<img
class="captured-image"
v-if="capturedImage"
:src="capturedImage"
alt="Captured Image"
/>
</div>
</div>
</template>
<script setup>
import {
onBeforeUnmount,
onMounted,
ref,
toRefs,
defineAsyncComponent,
computed,
watch,
nextTick,
reactive,
} from "vue";
import { Toast } from "vant";
const props = defineProps({
disabled: {
type: Boolean,
default: false,
},
afterRead: {
type: Function,
default: () => {
return true;
},
},
beforeRead: {
type: Function,
default: () => {},
},
});
const emit = defineEmits(["clickUpload"]);
const cameraVisible = ref(false);
const photoVisible = ref(false);
const capturedImage = ref(null);
const videoElement = ref(null);
const canvasElement = ref(null);
const file = reactive({
content: "",
file: {},
});
watch(() => cameraVisible.value, newVal => {
if (newVal) {
document.getElementsByTagName("body")[0].style.backgroundColor = "#000000";
} else {
document.getElementsByTagName("body")[0].style.backgroundColor = "#ffffff";
}
});
onBeforeUnmount(() => {
stopVideoStream();
});
const clickCamera = async (e) => {
emit("clickUpload", e);
// 开启摄像头前检测是否触发了阻止默认事件
if (e.defaultPrevented) {
return;
} else {
setupCamera();
}
};
const uploadBtn = ref(null);
// 默认使用后置摄像头
const facingMode = ref(sessionStorage.facingMode ?? "environment");
const switchCamera = () => {
facingMode.value =
facingMode.value === "environment" ? "user" : "environment";
// 当点击切换按钮时，如果当前是后置摄像头，则切换到前置摄像头，反之亦然。
sessionStorage.facingMode = facingMode.value;
// 重新设置摄像头以应用更改
stopVideoStream();
nextTick(() => {
uploadBtn.value.$el.click();
});
};
const setupCamera = async () => {
try {
initFile();
navigator.mediaDevices
.getUserMedia({
video: { facingMode: facingMode.value },
})
.then((stream) => {
const videoElementObj = videoElement.value;
videoElementObj.srcObject = stream;
cameraVisible.value = true;
if ("srcObject" in videoElementObj) {
videoElementObj.srcObject = stream;
} else {
// 防止在新的浏览器里使用它，因为它已经不再支持了
videoElementObj.src = window.URL.createObjectURL(stream);
}
videoElementObj.onloadedmetadata = function (e) {
videoElementObj.play();
};
})
.catch((err) => {
Toast.fail("访问用户媒体设备失败：", err.message);
});
} catch (error) {
cameraVisible.value = false;
console.log("获取摄像头失败:", error);
Toast.fail("获取摄像头失败");
}
};
const capturePhoto = () => {
const videoElementObj = videoElement.value;
const canvasElementObj = canvasElement.value;
const context = canvasElementObj.getContext("2d");
canvasElementObj.width = videoElementObj.videoWidth;
canvasElementObj.height = videoElementObj.videoHeight;
context.drawImage(
videoElementObj,
0,
0,
canvasElementObj.width,
canvasElementObj.height
);
capturedImage.value = canvasElementObj.toDataURL();
photoVisible.value = true;
};
const cancelPhoto = () => {
photoVisible.value = false;
capturedImage.value = "";
};
const confirmPhoto = () => {
stopVideoStream();
file.content = capturedImage.value;
file.file = base64ToFile(capturedImage.value, "photo" + Date.now());
const passBeforeRead = props.beforeRead(file);
if (passBeforeRead || passBeforeRead === undefined) {
props.afterRead(file);
}
};
const initFile = () => {
file.content = "";
file.file = "";
capturedImage.value = "";
};
const stopVideoStream = () => {
photoVisible.value = false;
cameraVisible.value = false;
if (videoElement.value && videoElement.value.srcObject) {
const tracks = videoElement.value.srcObject.getTracks();
tracks.forEach((track) => {
track.stop();
});
}
};
const base64ToFile = (dataurl, fileName) => {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
// suffix是该文件的后缀
let suffix = mime.split("/")[1];
// atob 对经过 base-64 编码的字符串进行解码
let bstr = atob(arr[1]);
// n 是解码后的长度
let n = bstr.length;
// Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0
let u8arr = new Uint8Array(n);
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
// 第三个参数是 要放到文件中的内容的 MIME 类型
return new File([u8arr], `${fileName}.${suffix}`, {
type: mime,
});
};
</script>
<style lang="less" scoped>
.camera-content {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background: #000000;
z-index: 99;
}
.close-photo {
position: absolute;
left: 0;
z-index: 100;
border: unset;
background: #000000;
}
.camera-video {
width: 100vw;
height: auto;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-55%);
}
.take-photo {
width: 70px;
height: 70px;
position: absolute;
z-index: 100;
bottom: 40px;
left: 20%;
// transform: translateX(-50%);
border-radius: 50%;
font-size: 28px;
background: #ffffff;
}
.switch-camera {
width: 70px;
height: 70px;
position: absolute;
z-index: 100;
bottom: 40px;
right: 20%;
// transform: translateX(-50%);
border-radius: 50%;
font-size: 28px;
background: #ffffff;
}
.captured-image-content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #000000;
}
.cancel-photo {
color: #ffffff;
border: unset;
background: none;
top: 0;
left: 0;
position: fixed;
}
.confirm-photo {
color: #0570db;
border: unset;
background: none;
top: 0;
right: 0;
position: fixed;
}
.captured-image {
width: 100%;
height: auto;
}
</style>
ps:代码使用ref绑定上传按钮到uploadBtn，使用uploadBtn.value.$el.click()触发按钮点击事件。
由于是Vant按钮组件，所以需要使用$el来获取原生DOM。
nextTick函数可以在DOM更新完成后执行回调。
假如使用ref绑定组件到orgPicker，那么可以使用orgPicker.value.show()来显示组件。
const orgPicker = ref(null); const goToSelectNodePeople = () => { orgPicker.value.show(); };
2.编写androidOrIos.js
export const checkMobileModel = () => { let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (isAndroid) { return 'Android' } if (isIOS) { return 'IOS' } return '' }
3.导入两个文件
import AndImgCapture from "@/components/andImgCapture/andImgCapture.vue";
import { checkMobileModel } from "@/utils/androidOrIos";
4.在主页面实现拍照上传基本功能
<AndImgCapture v-if="checkMobileModel() === 'Android'" :after-read="(file) => uploaderAfter(file, 'promotionPhoto')" @click-upload="openUpload($event, item)" > </AndImgCapture> <van-uploader v-else :multiple="true" :preview-image="false" :max-size="50000 * 1024" :after-read="(file) => uploaderAfter(file, 'promotionPhoto')" @click-upload="openUpload($event, item)" @oversize="onOversize" capture="camera" accept="image/*" > <van-button icon="plus" type="primary">拍照上传</van-button> </van-uploader>
即可。
