uniapp上传图片视频

最新推荐文章于 2024-05-09 10:59:32 发布

故由

最新推荐文章于 2024-05-09 10:59:32 发布

阅读量517

点赞数 1

分类专栏： uniapp 文章标签： vue uni-app 安卓 ios

本文链接：https://blog.csdn.net/weixin_45096008/article/details/119607328

版权

本文介绍如何在uni-app中实现图片和视频的单独选择上传功能，每次仅能选择一个视频。

摘要由CSDN通过智能技术生成

图片和视频一起上传，但是要分开选择。每次只能选择一个视频。
index.vue

<template>
	<view class="burst-wrap">
		<view class="burst-wrap-bg">
			<view class="title" @click="chooseVideoImage()">点击上传图片和视频</view>
			<view>
				<!-- 信息提交 -->
				<view class="burst-info">
					<view class="uni-uploader-body">
						<view class="uni-uploader__files">
							<block v-for="(item,index) in imagesUrlPath" :key="index">
								<view v-if="item.type=='img'" class="uni-uploader__file">
									<view class="icon iconfont icon-cuo" @tap="delect(index)"></view>
									<image class="uni-uploader__img" :src="item.url" :data-src="item.url"
										@tap="previewImage">
									</image>
								</view>
								<view v-else-if="item.type=='video'" class="uploader_video">
									<view class="icon iconfont icon-cuo" @tap="delectVideo"></view>
									<video :src="item.url" class="video"></video>
								</view>
							</block>
							<view class="uni-uploader__input-box">
								<view class="uni-uploader__input" @tap="chooseVideoImage"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var wv;
	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	export default {
   
		data() {
   
			return {
   
				imageValue: [],
				imageList: [], //图片
				src: "", //视频存放
				sourceTypeIndex: 2,
				checkedValue: true,
				checkedIndex: 0,
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
   
						value: 'back',
						name: