h5相机功能
利用vant + input file
.cameraInput {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: none;
}
.btnUpload {
position: relative;
text-align: center;
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
box-sizing: border-box;
display: inline-block;
width: 148px;
height: 148px;
cursor: pointer;
line-height: 146px;
vertical-align: top;
}
.imgItem {
display: inline-block;
position: relative;
border: 1px dashed #c0ccda;
width: 148px;
height: 148px;
cursor: pointer;
img {
margin-top: 4px;
width: 140px;
height: 140px;
}
.close {
position: absolute;
right: -14px;
top: -10px;
background: #fff;
border-radius: 100px;
color: $danger;
}
}
/**
* @description: 上传文件景天参数
* @return {*}
* @Date Changed:
*/
export interface Action {
name: string
type: string
value: string
}
/**
* @description:图片返回值处理
* @return {*}
* @Date Changed:
*/
export interface ImgFace {
resourcesId: string
resourceUrl: string
fullFileName: string
fileName: string
id: string
}
/**
* @descriptioninfo
* @return {*}
* @Date Changed:
*/
export interface InfoInterface {
imgList: string[]
actions: Action[]
}
export interface fileBox {
show: boolean
url: string
}
使用
// 调用相机
const face = ref(null)
face.value.selectAction({ value: 'CameraView' })