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

使用uni-app实现点击上传，既可以上传视频，有可以上传图片，图片预览，删除图片和视频功能，最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件，只能靠自己手写，

 

 

 1.页面布局

通过uni-app提供的标签，进行页面布局，这里就不多讲了，uni-app提供的有这个案例，可以直接把他们的样式拷贝过来修改一下就行。

class="uni-uploader-body">
                        class="uni-uploader__files">
                            
                           for="(image,index) in imageList" :key="index">
                                class="uni-uploader__file">
                                    class="icon iconfont icon-cuo" @tap="delect(index)">
                                    class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage">
                                
                            
                            
                            class="uni-uploader__file" v-if="src">
                                class="uploader_video">
                                    class="icon iconfont icon-cuo" @tap="delectVideo">
                                    
                                
                            
                            class="uni-uploader__input-box" v-if="VideoOfImagesShow">
                                class="uni-uploader__input" @tap="chooseVideoImage">
                            
                        
                    

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 = ''
                        }
                    }
                })
            },

最终代码

以上都是实现这个功能的所有代码。