uni-app实图片和视频上传
作者：互联网
使用uni-app实现点击上传，既可以上传视频，有可以上传图片，图片预览，删除图片和视频功能，最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件，只能靠自己手写，
1.页面布局
通过uni-app提供的标签，进行页面布局，这里就不多讲了，uni-app提供的有这个案例，可以直接把他们的样式拷贝过来修改一下就行。
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<!-- 图片 -->
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<view class="icon iconfont icon-cuo" @tap="delect(index)"></view>
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<!-- 视频 -->
<view class="uni-uploader__file" v-if="src">
<view class="uploader_video">
<view class="icon iconfont icon-cuo" @tap="delectVideo"></view>
<video :src="src" class="video"></video>
</view>
</view>
<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
<view class="uni-uploader__input" @tap="chooseVideoImage"></view>
</view>
</view>
</view>
1.在data定义一些变量
data() {
return {
imageList:[],//图片
src:"",//视频存放
sourceTypeIndex: 2,
sourceType: ['拍摄', '相册', '拍摄或相册'],
VideoOfImagesShow:true,
cameraList: [{
value: 'back',
name: '后置摄像头',
checked: 'true'
},
{
value: 'front',
name: '前置摄像头'
},
],
}
},
3.通过使用uni-app提供的api显示操作菜单，在methods写这个方法，通过判断来，选择的是图片还是视频，根据选择的tabindex选择，然后调用对应的方法即可
chooseVideoImage(){
uni.showActionSheet({
title:"选择上传类型",
itemList: ['图片','视频'],
success: (res) => {
console.log(res)
if(res.tapIndex == 0){
this.chooseImages()
} else {
this.chooseVideo()
}
}
})
},
4.上传图片功能，也是通过uni-app提供的chooseImages来实现
chooseImages(){
// 上传图片
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择
success:(res)=> {
this.imageList = this.imageList.concat(res.tempFilePaths);
if(this.imageList.length == 4) {
this.VideoOfImagesShow = false
}
}
});
},
5.图片预览功能，urls必须要接受的是一个数组
previewImage: function(e) {
//预览图片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
6.点击图片删除功能，点击对应的图片，根据index索引值进行删除
delect(index){
uni.showModal({
title: "提示",
content: "是否要删除该图片",
success: (res) => {
if (res.confirm) {
this.imageList.splice(index, 1)
}
}
})
},
7.实现视频上传功能
chooseVideo(){
// 上传视频
console.log('上传视频')
uni.chooseVideo({
maxDuration:10,
count: 1,
camera: this.cameraList[this.cameraIndex].value,
sourceType: sourceType[this.sourceTypeIndex],
success: (res) => {
console.log(JSON.stringify(res.tempFilePath),'视频')
this.src = res.tempFilePath;
console.log(this.src)
}
})
},
8.点击视频删除功能
delectVideo(){
uni.showModal({
title:"提示",
content:"是否要删除此视频",
success:(res) =>{
if(res.confirm){
this.src = ''
}
}
})
},
最终代码
<template>
<view class="burst-wrap">
<view class="burst-wrap-bg">
<view>
<!-- 信息提交 -->
<view class="burst-info">
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<!-- 图片 -->
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<view class="icon iconfont icon-cuo" @tap="delect(index)"></view>
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
</view>
</block>
<!-- 视频 -->
<view class="uni-uploader__file" v-if="src">
<view class="uploader_video">
<view class="icon iconfont icon-cuo" @tap="delectVideo"></view>
<video :src="src" class="video"></video>
</view>
</view>
<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
<view class="uni-uploader__input" @tap="chooseVideoImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var sourceType = [
['camera'],
['album'],
['camera', 'album']
]
export default {
data() {
return {
imageList:[],//图片
src:"",//视频存放
sourceTypeIndex: 2,
checkedValue:true,
checkedIndex:0,
sourceType: ['拍摄', '相册', '拍摄或相册'],
cameraList: [{
value: 'back',
name: '后置摄像头',
checked: 'true'
},
{
value: 'front',
name: '前置摄像头'
},
],
cameraIndex: 0,
VideoOfImagesShow:true,
}
},
onUnload() {
this.src = '',
this.sourceTypeIndex = 2,
this.sourceType = ['拍摄', '相册', '拍摄或相册'];
},
methods: {
chooseVideoImage(){
uni.showActionSheet({
title:"选择上传类型",
itemList: ['图片','视频'],
success: (res) => {
console.log(res)
if(res.tapIndex == 0){
this.chooseImages()
} else {
this.chooseVideo()
}
}
})
},
chooseImages(){
// 上传图片
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择
success:(res)=> {
this.imageList = this.imageList.concat(res.tempFilePaths);
if(this.imageList.length == 4) {
this.VideoOfImagesShow = false
}
}
});
},
chooseVideo(){
// 上传视频
console.log('上传视频')
uni.chooseVideo({
maxDuration:10,
count: 1,
camera: this.cameraList[this.cameraIndex].value,
sourceType: sourceType[this.sourceTypeIndex],
success: (res) => {
console.log(JSON.stringify(res.tempFilePath),'视频')
this.src = res.tempFilePath;
console.log(this.src)
}
})
},
previewImage: function(e) {
//预览图片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
delect(index){
uni.showModal({
title: "提示",
content: "是否要删除该图片",
success: (res) => {
if (res.confirm) {
this.imageList.splice(index, 1)
}
}
})
},
delectVideo(){
uni.showModal({
title:"提示",
content:"是否要删除此视频",
success:(res) =>{
if(res.confirm){
this.src = ''
}
}
})
}
}
}
</script>
<style>
.burst-wrap{
width: 100%;
height: 100%;
}
/* .burst-wrap .burst-wrap-bg{
position: relative;
width: 100%;
height: 320upx;
background:linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
border-bottom-right-radius: 80upx;
border-bottom-left-radius: 80upx;
} */
.burst-wrap .burst-wrap-bg>view{
width: 90%;
height: 100%;
margin: 0 auto;
position: absolute;
top: 65upx;
left: 0;
right: 0;
}
.form-item{
width: 100%;
}
.form-item textarea{
display: block;
height: 220upx;
width: 100%;
color: #AAAAAA;
font-size: 28upx;
}
.uni-uploader__file,.uploader_video{
position: relative;
z-index: 1;
width: 200upx;
height: 200upx;
}
.uni-uploader__img {
width: 200upx;
height: 200upx;
}
.icon-cuo {
position: absolute;
right: 0;
top: 5upx;
background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
color: #FFFFFF;
z-index: 999;
border-top-right-radius: 20upx;
border-bottom-left-radius: 20upx;
}
.video{
width: 100%;
height: 100%;
}
.login-input-box{
position: relative;
border-bottom: 1upx solid #EEEEEE;
}
.login-input-box .forget,.login-input-box .phone{
position: absolute;
top: 0;
height: 100%;
z-index: 100;
}
.login-input-box .phone{
width: 100upx;
left: 0;
color: #666666;
font-weight: bold;
}
.login-input-box .phone-input{
padding-left: 100upx;
}
.address-wrap,.open-info{
margin-top: 20upx;
}
.open-info>view:last-child{
font-size: 28upx;
color: #999999;
}
.address-wrap .address {
background: #F2F2F2;
border-radius: 40upx;
padding: 0 20upx;
}
.user-set-btn{
margin: 40upx;
background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
color: #FFFFFF;
text-align: center;
height: 88upx;
line-height: 88upx;
}
</style>
以上都是实现这个功能的所有代码。
标签：视频,res,app,uni,imageList,上传,100% 来源： https://www.cnblogs.com/zhoulifeng/p/11697124.html