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)=> {
						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)  //頭條
					},
				});
			},

　　

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(){
                // 上傳視頻
                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;  //頭條
                    }
                })
            },

 

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)=> {
                        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>

 

以上都是實現這個功能的所有代碼。