专栏首页前端技术开发uni-app实图片和视频上传

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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue实现城市列表选择

    最后的成果就是下面所展示的内容,因为gif图没有做,只能截图所展示,接下来,会带着大家一步一步的完成下面功能,脚手架搭建和node安装在本次案例不会讲解,如果了...

    小周sri的码农
  • vue导出excel数据表格功能

    前端工作量最多的就是需求,需求就是一直在变,比如当前端数据写完之后,需要用Excel把数据下载出来。

    小周sri的码农
  • 小程序实现综合排序页面布局

    在一些场景中,常常会遇到过一个功能,点击什么筛选的,综合排序刷新接口数据,就像下面这样的效果。小程序只是先把页面布局好,数据字段定义好了,就差和后端沟通,按照我...

    小周sri的码农
  • (四十九)c#Winform自定义控件-下拉框(表格)

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • javascript设计模式十:装饰者模式

    在js函数开发中,想要为现有函数添加与现有功能无关的新功能时,按普通思路肯定是在现有函数中添加新功能的代码。这并不能说错,但因为函数中的这两块代码其实并无关联,...

    前端_AWhile
  • js 中的class

    js的class仅仅为一个语法糖,是在原先构造函数的基础上出现的class,仅仅如此。所以使用构造函数构造类,或者使用class语法糖构造类都是相同的。具体还是...

    mySoul
  • 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的...

    徐小夕
  • (五十二)c#Winform自定义控件-LED数字

    GitHub:https://github.com/kwwwvagaa/NetWinformControl

    冰封一夏
  • Python也可以这样玩!

    可以了解整个香港电影史,从早期合拍上海片,到胡金栓的武侠片,到李小龙时代,然后是成龙,接着周星驰

    1480
  • spring 整合JMS

    (1)创建工程springjms_producer,在POM文件中引入SpringJms 、activeMQ以及单元测试相关依赖

    一点博客

扫码关注云+社区

领取腾讯云代金券