template
<view class="u-f wrap">
<u-upload
accept='image'
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
multiple
name="1"
width="160rpx"
height="160rpx"
>
<image src="@/static/img/upload1.png"
mode="" style="width: 160rpx;height: 160rpx;"></image>
</u-upload>
</view>
<view class="u-f wrap">
<u-upload
:fileList="fileList2"
@afterRead="afterRead"
@delete="deletePic"
name="2"
multiple
accept="video"
width="160rpx"
height="160rpx"
>
<image src="@/static/img/upload2.png"
mode="" style="width: 160rpx;height: 160rpx;"></image>
</u-upload>
</view>
script
<script>
export default {
data() {
return {
fileList1: [],
fileList2:[],
}
},
methods:{
// 新增图片
async afterRead(event){
// 当设置 multiple 为 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(lists[i].url,event.name)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
deletePic(event){
this[`fileList${event.name}`].splice(event.index, 1);
},
uploadFilePromise(url,num) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: baseUrl + 'oss/upload',
filePath: url,
name: 'file',
formData: {},
success: (res) => {
res.data = JSON.parse(res.data);
if (res.data.status == 111111) {
setTimeout(() => {
resolve(res.data.data[0].url)
}, 1000)
} else {
uni.showToast({
title: '上传失败',
icon: 'none'
});
this[`fileList${num}`].pop();
return
}
},
fail: (error) => {
uni.showToast({
title: '上传失败',
icon: 'none'
});
reject(error)
}
});
})
},
// 预览图片
previewFun(num,list){
let that = this;
uni.previewImage({
current:num,
urls: list,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
},
}
}
</script>
css
<style lang='scss'>
video{
width: 210rpx;
height: 210rpx;
margin-bottom: 20rpx;
margin-right: 30rpx;
border-radius: 8rpx;
}
video:nth-child(3n){
margin-right: 0rpx;
}
</style>
