uni-app实现图片和视频上传功能

汪山孃 發表於 2019-10-18 10:59:00

使用uni-app实现点击上传，既可以上传视频，有可以上传图片，图片预览，删除图片和视频功能，最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件，只能靠自己手写，
<img src="https://img2018.cnblogs.com/blog/1188378/201910/1188378-20191018101403583-1612237459.gif">
 
 
 1.页面布局
通过uni-app提供的标签，进行页面布局，这里就不多讲了，uni-app提供的有这个案例，可以直接把他们的样式拷贝过来修改一下就行。
<div class="cnblogs_code">
<pre><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></pre>
</div>
1.在data定义一些变量
<div class="cnblogs_code">
<pre>data() {
 return {
 imageList:[],//图片
 src:"",//视频存放
 sourceTypeIndex: 2,
 sourceType: ['拍摄', '相册', '拍摄或相册'], 　　　　　　　　　 VideoOfImagesShow:true,
 cameraList: [{
 value: 'back',
 name: '后置摄像头',
 checked: 'true'
 },
 {
 value: 'front',
 name: '前置摄像头'
 },
 ],
 }
 },</pre>
</div>
3.通过使用uni-app提供的api显示操作菜单，在methods写这个方法，通过判断来，选择的是图片还是视频，根据选择的tabindex选择，然后调用对应的方法即可
<div class="cnblogs_code">
<pre>chooseVideoImage(){
 uni.showActionSheet({
 title:"选择上传类型",
 itemList: ['图片','视频'],
 success: (res) => {
 console.log(res)
 if(res.tapIndex == 0){
 this.chooseImages()
 } else {
 this.chooseVideo()
 }
 }
 })
 },</pre>
</div>
4.上传图片功能，也是通过uni-app提供的chooseImages来实现
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">chooseImages(){
// 上传图片
uni.chooseImage({
count: 4, //默认9
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album','camera'], //从相册选择
success:(res)=> {
let igmFile = res.tempFilePaths;
uni.uploadFile({
url:this.config.fileUrl,
method:"POST",
header:{
'Authorization':'bearer '+ uni.getStorageSync('token'),
'Content-Type':'multipart/form-data'
},
filePath:igmFile,
name:'file',
success: (res) =>{
// let imgUrls = JSON.parse(res.data); //微信和头条支持
let imgUrls = res.data //百度支持
this.imagesUrlPath = this.imagesUrlPath.concat(imgUrls.result.filePath);
this.imageList = this.imageList.concat(imgUrls.result.filePath); //微信
if(this.imageList.length>=4) {
this.VideoOfImagesShow = false;
} else {
this.VideoOfImagesShow = true;
}
}
})
// this.imageList = this.imageList.concat(res.tempFilePaths)//头条
},
});
},
</pre>
</div>
　　
5.图片预览功能，urls必须要接受的是一个数组
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">previewImage: function(e) {
//预览图片
var current = e.target.dataset.src
uni.previewImage({
current: current,
urls: this.imageList
})
},
</pre>
</div>
　6.点击图片删除功能，点击对应的图片，根据index索引值进行删除
<div class="cnblogs_code">
<pre>delect(index){
 uni.showModal({
 title: "提示",
 content: "是否要删除该图片",
 success: (res) => {
 if (res.confirm) {
 this.imageList.splice(index, 1)
 }
 }
 })
 },</pre>
</div>
7.实现视频上传功能
<div class="cnblogs_code">
<pre>chooseVideo(){
 // 上传视频
 uni.chooseVideo({
 maxDuration:60,
 count: 1,
 camera: this.cameraList[this.cameraIndex].value,
 sourceType: ['album'],
 success: (responent) => {
 let videoFile = responent.tempFilePath;
 uni.uploadFile({
 url:this.config.fileUrl,
 method:"POST",
 header:{
 'Authorization':'bearer '+ uni.getStorageSync('token')
 },
 filePath:videoFile,
 name:'file',
 success: (res) => {
 // let videoUrls = JSON.parse(res.data) //微信和头条支持
 let videoUrls = res.data //百度支持
 this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.result.filePath);
 this.src = videoUrls.result.filePath; //微信
 if(this.src) {
 this.itemList = ['图片']
 } else {
 this.itemList = ['图片','视频']
 }

 }
 })
 // this.src = responent.tempFilePath;//头条
 }
 })
 },</pre>
</div>
 
8.点击视频删除功能
<div class="cnblogs_code">
<pre>delectVideo(){
 uni.showModal({
 title:"提示",
 content:"是否要删除此视频",
 success:(res) =>{
 if(res.confirm){
 this.src = ''
 }
 }
 })
 },</pre>
</div>
最终代码
<div class="cnblogs_code">
<pre><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)=> {
 let igmFile = res.tempFilePaths;
 uni.uploadFile({
 url:this.config.fileUrl,
 method:"POST",
 header:{
 'Authorization':'bearer '+ uni.getStorageSync('token'),
 'Content-Type':'multipart/form-data'
 },
 filePath:igmFile[0],
 name:'file',
 success: (res) =>{
 // let imgUrls = JSON.parse(res.data); //微信和头条支持
 let imgUrls = res.data //百度支持
 this.imagesUrlPath = this.imagesUrlPath.concat(imgUrls.result.filePath);
 this.imageList = this.imageList.concat(imgUrls.result.filePath); //微信
 if(this.imageList.length>=4) {
 this.VideoOfImagesShow = false;
 } else {
 this.VideoOfImagesShow = true;
 }
 }
 })
 // this.imageList = this.imageList.concat(res.tempFilePaths)//头条
 },
 });
 },
 chooseVideo(){
 // 上传视频
 uni.chooseVideo({
 maxDuration:60,
 count: 1,
 camera: this.cameraList[this.cameraIndex].value,
 sourceType: ['album'],
 success: (responent) => {
 let videoFile = responent.tempFilePath;
 uni.uploadFile({
 url:this.config.fileUrl,
 method:"POST",
 header:{
 'Authorization':'bearer '+ uni.getStorageSync('token')
 },
 filePath:videoFile,
 name:'file',
 success: (res) => {
 // let videoUrls = JSON.parse(res.data) //微信和头条支持
 let videoUrls = res.data //百度支持
 this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls.result.filePath);
 this.src = videoUrls.result.filePath; //微信
 if(this.src) {
 this.itemList = ['图片']
 } else {
 this.itemList = ['图片','视频']
 }

 }
 })
 // this.src = responent.tempFilePath;//头条
 }
 })
 },
 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></pre>
</div>
 
以上都是实现这个功能的所有代码。 
来源：https://www.cnblogs.com/zhoulifeng/p/11697124.html

頁: [1]

琼殿技术论坛's Archiver

uni-app实现图片和视频上传功能