uniapp上传图片视频app选择媒体

app上传媒体

因为uniapp开发app是无法同时选择图片和视频的，只能分开调用图片选择和视频选择

图片选择的api：uni.chooseImage

视频选择的api：uni.chooseVideo

选择图片和视频的组件：

<template>
	<!-- 适用于新建 getUrlList方法为父组件获取的图片加视频的数组集合-->
	<view class="bodyClass">
		<!-- 显示图片视频 -->
		<view class="" style="display: flex;flex-wrap: wrap;">
			<view
				style="position: relative;height: 151rpx;width: 151rpx;border: 1px solid rgba(209, 209, 209, 0.6);border-radius: 8rpx;margin: 0 20rpx 20rpx 0;"
				v-for="(item,index) in imageList" :key="index">
				<image :src="item" mode="aspectFill" style="height: 151rpx;width: 151rpx;"
					@click="previewImage(imageList,index)"></image>
				<uni-icons color="#A4A4A4" type="clear" size="20"
					style="position: absolute;right: -15rpx;top: -15rpx;z-index: 999;" @click="delImg(index)">
				</uni-icons>
			</view>

			<view class=""
				style="position: relative;height: 151rpx;width: 151rpx;border: 1px solid rgba(209, 209, 209, 0.6);border-radius: 8rpx;margin: 0 20rpx 20rpx 0;"
				v-for="(item2,index2) in vedioList" :key="item2">
				<view
					style="height: 151rpx;width: 151rpx;border-radius: 8rpx;background-color: #000;display: flex;justify-content: center;align-items: center;"
					@click="vedioClick(item2)">
					<u-icon name="play-right-fill" color="#fff"></u-icon>
				</view>

				<uni-icons color="#A4A4A4" type="clear" size="20" style="position: absolute;right: -15rpx;top: -15rpx;"
					@click="delVedio(index2)"></uni-icons>
			</view>
			<!-- 上传的+符号 -->
			<view class="upload detail_img" style="height: 151rpx;width: 151rpx;border-radius: 8rpx;border: 1px solid rgba(209, 209, 209, 0.6);" @click="unloadFile"
				v-if="UrlList.length<UrlListLength">
				<uni-icons type="plusempty" color="#A4A4A4" size="30"></uni-icons>
			</view>
		</view>
		<!-- 选择上传图片或者视频 -->
		<u-popup :show="show" @close="close" @open="open" :safeAreaInsetBottom="false" :round="10">
			<view class="" style="height: 300rpx;text-align: center;">
				<view
					style="color:#333333;width:100%;font-size: 32rpx;height: 100rpx;line-height: 100rpx;border-bottom: 1px solid rgb(214, 215, 217);">
					请选择类型</view>
				<view
					style="color:#3e3e3e;width:100%;font-size: 30rpx;height: 100rpx;line-height: 100rpx;border-bottom: 1px solid rgb(214, 215, 217);"
					@click="selectImg">照片</view>
				<view style="color:#3e3e3e;width:100%;font-size: 30rpx;height: 100rpx;line-height: 100rpx;"
					@click="selectVedio">视频</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				imageList: [], //图片
				vedioList: [], //视频
				videoContext: "",
				UrlList: []
			}
		},
		props: ["UrlListLength"],
		methods: {
			// 上传文件,要选择上传什么文件
			unloadFile() {
				this.show = true
			},
			close() {
				this.show = false
			},
			open() {

			},
			// 选择图片上传
			selectImg() {
				this.show = false
				let that = this
				uni.chooseImage({
					count: that.UrlListLength - that.UrlList.length, //默认9
					sizeType: ['compressed'], 
					success: function(res) {
						that.imageList.push(...res.tempFilePaths)
						that.UrlList = that.vedioList.concat(that.imageList)
						that.$emit("getUrlList", that.UrlList)
					}
				});
			},
			// 选择视频上传
			selectVedio() {
				this.show = false
				let that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						that.vedioList.push(res.tempFilePath)
						that.UrlList = that.imageList.concat(that.vedioList)
						that.$emit("getUrlList", that.UrlList)

					}
				});
			},
			// 预览图片
			previewImage(item, index) {
				let that = this
				uni.previewImage({
					urls: item,
					current: index,
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
							console.log(err.errMsg);
						},
						complete(e) {
							console.log(e);
						}
					}
				});
			},
			vedioClick(item) {
				//跳转到播放视频的页面，预览视频
			},
			delImg(index) {
				this.imageList.splice(index, 1)
				this.$forceUpdate();
				this.UrlList = [...this.imageList, ...this.vedioList]
				this.$emit("getUrlList", this.UrlList)
			},
			delVedio(index) {
				this.vedioList.splice(index, 1)
				this.$forceUpdate();
				this.UrlList = [...this.imageList, ...this.vedioList]
				this.$emit("getUrlList", this.UrlList)
			}

		}
	}
</script>

<style scoped lang="scss">
	.bodyClass {
		.upload {
			// width: 160rpx;
			// height: 160rpx;
			// border: 1px solid #ececec;
			display: flex;
			align-items: center;
			justify-content: center;
		}
.detail_img {
	width: 160rpx;
	height: 160rpx;
	border: 1px solid rgba(209, 209, 209, 0.6);
	border-radius: 8rpx;
	margin: 0 20rpx 20rpx 0;
}
	}
</style>

           

UrlListLength：父组件传过来的值，为上传图片和视频加起来的总数量

新建vue文件引用组件，我把组件放在根目录components文件下的addMedia文件里

简单实现：

<template>
<view>
<image-and-vedio @getUrlList="getUrlList" :UrlListLength="6"></image-and-vedio>
</view>
</template>
<script>
import imageAndVedio from '@/components/addMedia/imageAndVedio.vue'
export default {
components: {
			imageAndVedio
		},
},
methods: {
// 获得上传的url集合
	getUrlList(UrlList) {
		//UrlList就是我们要的上传的url集合
	},
}
</script>
           

效果图：

当选择照片或者视频的时候，会调用系统本身来选择