在IOS里面使用van组件上传图片的时候可以选择是拍照上传还是选择相册里面的图片上传,但是在Android里面使用vant组件里面的上传图片只能选择相册上传图片,所以需要使用原生写一个上传图片的组件在Android里面使用,以保持IOS和Android一致。
ImageUnit.vue文件
<template>
<div class="image-unit">
<img style="width: 100%; height: 100%" fit="cover" :src="imagePath" />
<div class="cover" v-if="enabelDelete" @click="deletePicture">
<span class="text">删除</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import { Image as VanImage, Toast } from "vant";
import { PublicApi } from "@/api";
@Component({
components: { VanImage },
})
export default class ImageUnit extends Vue {
@Prop({
type: String,
default: "https://img.yzcdn.cn/vant/apple-1.jpg",
})
imagePath!: string;
@Prop({
type: String,
default: "",
})
fileId!: string;
@Prop({
type: Boolean,
default: true,
})
enabelDelete: any;
@Emit()
async deletePicture() {
return this.imagePath;
}
}
</script>
<style lang="scss" scoped>
.image-unit {
position: relative;
width: 74px;
height: 74px;
border-radius: 4px;
border: solid 1px #e4e4e6;
.cover {
position: absolute;
bottom: 0;
width: 74px;
height: 26px;
background-color: rgba($color: #000000, $alpha: 0.7);
border-radius: 0px 0px 4px 4px;
text-align: center;
.text {
font-family: PingFang SC;
font-size: 12px;
line-height: 26px;
letter-spacing: 0px;
color: #ffffff;
}
}
}
</style>
IncreaseUnit.vue文件
<template>
<div>
<div class="increase-unit" @click="$refs.actionsOneGroup.open()">
<span class="icons iconfont icon-jiahao"></span>
</div>
<f7-actions ref="actionsOneGroup">
<f7-actions-group>
<f7-actions-button @click="takePicture">相机</f7-actions-button>
<f7-actions-button @click="getPicture">相册</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button color="red">取消</f7-actions-button>
</f7-actions-group>
</f7-actions>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
declare const window: any;
declare const LocalFileSystem: any;
@Component
export default class IncreaseUnit extends Vue {
// 选图
getPicture() {
let imagePicker = (window as any).ImagePicker;
let that =