Android选择相机和相册上传图片

最新推荐文章于 2025-02-11 13:20:46 发布

迷路时你就往前走i

最新推荐文章于 2025-02-11 13:20:46 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue upload

本文链接：https://blog.csdn.net/weixin_45803033/article/details/115066996

版权

在Android设备上，使用Vant组件无法像iOS那样直接选择拍照或从相册上传图片，因此需要自定义原生组件来确保体验一致性。本文将介绍如何在`ImageUnit.vue`、`IncreaseUnit.vue`和`UploadPicture.vue`三个文件中实现这一功能，并分享使用过程中的注意事项，以及在`config.xml`中解决上传问题的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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 =

最低0.47元/天解锁文章