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

最新推荐文章于 2024-09-12 15:56:50 发布
最新推荐文章于 2024-09-12 15:56:50 发布
阅读量8.8k 收藏 57
点赞数 4
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Govern66/article/details/104290216
版权

使用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>

 

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

小周sir的码农
关注
专栏目录
uni-app上传图片和上传视频
weixin_45459904的博客
08-31 5005
<view style="display: flex; flex-wrap: wrap;"> <!--图片--> <view style="width:550rpx;height:auto;margin:20rpx auto 0;display:flex;justify-content: space-between;flex-wrap: wrap;"> <view v-for="(item,index) in imageList" :key="index"
uniapp怎么调起摄像头拍视频_uni-app实现图片和视频上传功能
weixin_39521009的博客
12-20 3005
var sourceType =[['camera'],['album'],['camera', 'album']]exportdefault{data() {return{imageList:[],//图片src:"",//视频存放sourceTypeIndex: 2,checkedValue:true,checkedIndex:0,sourceType: ['拍摄', '相册', '拍摄或相册...
uniapp 多视频上传原生插件（android）
04-06
1.uniapp写视频上传时，小程序端有多视频上传，但是Android和ios没有，当前插件就是解决Android端多视频上传的问题。 2.如果需要iOS端可以进行留言，我再传一下ios多视频的插件。 3.使用方法： let video=uni.requireNativePlugin('Video-Selector'); video.selectVideo({ maxCount:9,//视频选择的最大值 },(ret)=>{ //返回的是视频的临时路径 })
uniapp app端上传视频，图片（图片与视频除了选中文件的api不一样，其他的都一样，全部采用filePath: options.filePathg格式上传）
weixin_47517731的博客
08-16 2092
name: options.name || 'file', // File 对象对应 key。formData: options.data || {}, //额外的 form data。url: BASE_URL + options.url, // 服务器 url。// 响应的数据是json字符串，把它转成对象。timeout: 8000, // 8秒超时时间，单位ms。// 404 ，500等错误码。由于在app端没有 tempFile，所以只能选择tempFilePath，msg('请求接口失败')..
【uniapp小程序】上传图片_小程序 uni
最新发布
2401_86963203的博客
09-12 762
这里给大家说个大坑successES6this。
uniapp上传视频
橘颂的博客
03-17 453
【代码】uniapp上传视频。
uniapp chooseVideo和uploadFile 选择视频或照片上传抖快平台踩坑
熊佳龙的博客
06-14 1052
vue uniapp chooseVideo, uploadFile选择照片上传踩坑，vue uniapp运算符双问号??在快手的template标签中会编译报错，抖音是可以正常解析的。
uniapp上传视频或图片
sinat_31644157的博客
05-05 641
实拍视频
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
在uni-app开发中，自定义组件的使用是提高应用灵活性和功能扩展性的重要手段。本话题聚焦于如何通过自定义组件来展示HTML富文本内容，包括图片、视频和音频的展示与播放。以下是对这个主题的详细阐述： 一、uni-app...
【uni-app】自定义-图形滑块验证码，后端php 的演示视频
05-14
在视频中，你将看到实际的编码过程和效果演示，包括uni-app的项目初始化、canvas图形绘制、滑动事件的绑定以及前后端交互的实现。这将帮助你更好地理解和应用这一功能，提升你的uni-app开发技能。 此外，对于初学者...
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
综上所述，uni-liveShow项目通过vue和uni-app技术，成功地实现了类似抖音和陌陌的直播功能，为开发者提供了构建此类应用的参考。在实际开发过程中，开发者需要结合具体需求，对项目进行定制化改造，并不断优化以提升...
uniapp影视视频H5小程序APP前后端源码
03-20
该版本前端使用uniapp开发，后端为php（one-php后台系统管理框架，基于tp5.1.*版本），目前已兼容微信小程序、双端APP及H5，功能健全，拆封即用。 该源码分两个版本1.0和2.0，2.0版本为1.0版本的重构版，主要重构了界面UI及系统架构，对于1.0版本来说，重构版除原有的API管理后台外，新增了版本控制系统、升级包制作工具、前端UNIAPP自助升级（易语言），实现用户自助升级，弥补了1.0版本下载安装包手动升级麻烦的问题，避免因为用户错误升级操作导致系统出现bug。 码云地址：https://gitee.com/lyq617/yunyingping2.0
【uniapp】上传视频录像
爱吃猫的鱼
05-07 605
【代码】【uniapp】上传视频录像。
uni-app app文件上传（ios通用）
m0_49578914的博客
07-05 2907
建议直接打包进行测试，真机测试选择文件可能无效。 地址：组件地址 示例： 地址：组件地址
uniapp-上传图片、上传视频
热门推荐
廖若星辰-LTY
03-16 2万+
uniapp 微信小程序 上传图片 上传视频 上传媒体文件 uni.chooseImage uni.chooseVideo uni.uploadFile uni.chooseMedia
uni-app图片、视频上传
yangyanqin2545的博客
05-25 1350
uni-app上传图片和视频
uniapp 实现上传图片和上传视频
m0_66809960的博客
05-09 1132
【代码】uniapp 实现上传图片和上传视频。
uniapp，上传视频图片、文件的组件
m0_47843571的博客
06-29 1083
uniapp，上传视频图片、文件的组件
uniapp上传图片视频app选择媒体
panpan2316872469的博客
12-27 1203
uniapp上传图片视频（媒体）
uni-app小程序核心功能封装教程
4. 功能实现：编写Vue.js代码，调用uni-app提供的API来实现具体功能，如页面布局、交互逻辑、数据处理等。 5. 调试与测试：利用HBuilderX提供的模拟器和真机测试功能，对小程序进行调试和测试。 6. 打包发布：完成...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值