当前位置：首页 > news >正文

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

news 2025/7/12 16:46:37

在这里插入图片描述

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

文档地址 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)},// 新增图片 afterReadasync 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

.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);}}}