uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 一次性上传多条视频 u-upload accept=“video“ uni.chooseMedia uni.uploadFile。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app开发微信小程序上传多个视频文件,uniapp

方式一部分安卓机只能一条一条传视频

文档地址 uview 2.0 Upload 上传组件
html

<view class="formupload">
	<u-upload 
	accept="video"
	:fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
		:maxCount="9"></u-upload>
</view>

script

	// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片 afterRead
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(event.name,lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(num,url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseUrl + 'upload', // 上传图片视频的接口名
						filePath: url,
						name: 'file',
						header: {},
						formData: {
							file: url
						},
						success: (res) => {
							res.data = JSON.parse(res.data)
							if (res.data.code == 0) {
								setTimeout(() => {
									resolve(res.data.url)
								}, 1000)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								this[`fileList${num}`].pop()
								return
							}
						},
						fail: (error) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
							reject(error)
						}
					});
				})
			},

方式二可以一次性上传多条视频

文档地址 video
uni.chooseMedia
uni.uploadFile

html

	<view class="u-flex wrap">
		<image src="@/static/image/up.png" mode="" class="u-w-160 u-h-160 u-m-r-16 u-m-b-16" 
		@click="upvideoFun" v-if="fileList3.length < 9"></image>
	<view class="vibox" v-for="(item,i) in fileList3" :key="i">
		<video :src="item.url" class="viimg"></video>
		<view class="vitext" @click="delFun(i)">  <text>x</text>  </view>	
	</view>
	</view>

script

	// 上传视频
		 upvideoFun(){
				let that = this;
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['video'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
						let lists = [].concat(res.tempFiles);
						for (let i = 0; i < lists.length; i++) {
								uni.uploadFile({
									url: baseUrl + 'upload',
									filePath: lists[i].tempFilePath,
									name: 'file',
									formData: {},
									success: (resres) => {
										let data = JSON.parse(resres.data);
										that.fileList3.push({
											url:data.url
										});
									}
								});
						}
				  }
				});
			},
	
			// 删除视频
			delFun(i){
				this.fileList3.splice(i, 1);
			},

css文章来源地址https://www.toymoban.com/news/detail-826431.html

.vibox{
		width: 80px;
		height: 80px;
		position: relative;
		border-radius: 2px;
		margin: 0 8px 8px 0;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		.viimg{
			width: 80px;
			height: 80px;
		}
		.vitext{
			position: absolute;
			top: 0;
			right: 0;
			background-color: #373737;
			height: 14px;
			width: 14px;
			display: flex;
			border-bottom-left-radius: 100px;
			align-items: center;
			justify-content: center;
			z-index: 3;
			text{
				font-size: 10px;
				font-weight: normal;
				top: 0px;
				color: #ffffff;
				transform: translate(1px,-3px);
			}
		}
	}