方式 一 部分安卓机 只能一条一条传视频
文档地址 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[`fil服务器托管网eList${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 >/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);
}
}
}
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: #yyds干货盘点# LeetCode程序员面试金典:根据身高重建队列
1.简述: 假设有打乱顺序的一群人站成一个队列,数组表示队列中一些人的属性(不一定按顺序)。每个表示第个人的身高为,前面正好有个身高大于或等于的人。peoplepeople[i] = [hi, ki]ihikihi 请你重新构造并返回输入数组所表示的队列。返回…