封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量

第一步

components里面新建一个manyImgUpload.vue组件，将以下代码放入

以下代码中需要你改的地方

uni.uploadFile中的参数，url为你公司的上传接口。files为你公司接口的参数，要什么格式自己转一下。header中的Authorization我这里是测试用的，还没来得及该改，需要你写成活的，手动去获取以下token即可
image标签中的图片为自定义，可以和ui小哥哥要，大小什么的看一下css，自己改一下就好

<template><view class="container"><!-- radio group --><view class="radio-group" v-if="showToogle"><!-- radio single --><view class="radio-single" v-for="(item, index) in radioList" :key="item.value" @click="radioToogleBtn(index)"><view class="radio-icon"><image v-show="item.isActive" src="/static/choose.png" mode="aspectFill" lazy-load="true" /></view><view class="text">{{ item.name }}</view></view></view><!-- image upload group --><view class="image-group" v-show="imgVideoFlag"><!-- single upload container --><view class="image-single" v-for="(item, index) in uploadImgList" :key="index"><image v-show="!item.imgUrl" @click="uploadImgBtn(index)" src="/static/shangchuan.png" mode="aspectFill" lazy-load="true" /><image v-show="item.imgUrl" :src="item.imgUrl" mode="aspectFill" lazy-load="true" /><image v-show="item.showDelImg" @click="delImgBtn(index)" class="del-icon" src="/static/delImg.png" mode="aspectFill" lazy-load="true" /></view></view><!-- video upload group --><view class="video-group" v-show="!imgVideoFlag"><!-- single upload container --><view class="video-single" v-for="(item, index) in uploadVideoList" :key="index"><image v-show="!item.videoUrl" @click="uploadVideoBtn(index)" src="/static/shangchuan.png" mode="aspectFill" lazy-load="true" /><video v-show="item.videoUrl" :src="item.videoUrl" /><image v-show="item.showDelImg" @click="delVideoBtn(index)" class="del-icon" src="/static/delImg.png" mode="aspectFill" lazy-load="true" /></view></view></view>
</template><script>
export default {name: 'ManyImgUpload', // 使用说明// 示例 <ManyImgUpload :showToogle="true" :count="3" @chooseAfter="chooseAfter"></ManyImgUpload>// 属性 // showToogle 是否显示图片和视频的切换按钮，默认为false// count 限制上传数量，默认1张// 事件// chooseAfter 参数(urlList)，urlList为图片和视频的文件上传后的完整urlprops: {// 是否显示图片和视频的切换按钮showToogle: {type: Boolean,default: false},// 上传单组的数量，默认1count: {type: Number,default: 1}},data() {return {// 上传图片框组以及显隐由该list控制uploadImgList: [{imgUrl: '',showDelImg: false,}],// 上传视频框组以及显隐由该list控制uploadVideoList: [{videoUrl: '',showDelImg: false,}],// 单选框组radioList: [{ name: '图片', value: 0, isActive: true },{ name: '视频', value: 1, isActive: false }],// 图片和视频的切换标记imgVideoFlag: true}},methods: {// 单选切换radioToogleBtn(index) {this.radioList.forEach(item => item.isActive = false)this.radioList[index].isActive = truethis.imgVideoFlag = !this.imgVideoFlag},// 图片上传按钮uploadImgBtn(index) {// 选择图片uni.chooseImage({count: 1,sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res) => {// console.log('本地', res);// 加载uni.showLoading({title: '正在上传'})// 上传具体操作uni.uploadFile({url: 'https://xxxxxx.cn/prod-api/api/file/img',files: res.tempFilePaths.map(item => {return {name: 'file',uri: item}}),header: {'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBmMjM0YjMyLWZkOTktNDdmZC1hZWQ1LTkwMTQzZmQwNTljYSJ9.FNefBR_Ai_aTCrJ4woYkZPR7QorwN-KwnwNeUim7aRxzSPCHPyFHvVnh5NsKjJJ2EHE6sSthBloMmMT_FLImyw'},success: (uploadFileJson) => {const fileObj = JSON.parse(uploadFileJson.data)if(fileObj.code !== 200) return// console.log('服务器', fileObj);// 关闭加载状态uni.hideLoading()// 回显this.uploadImgList[index].imgUrl = fileObj.data.url// 显示单组的删除按钮this.uploadImgList[index].showDelImg = true// 将图片框组的url传递出去this.$emit('chooseAfter', {imgUrlList: this.uploadImgList.filter(item => item.imgUrl).map(item => item.imgUrl),videoUrlList: this.uploadVideoList.filter(item => item.videoUrl).map(item => item.videoUrl)})// 加一个上传单组, 超出最大上传数量，不再添加if(this.uploadImgList.length >= this.count ) returnthis.uploadImgList.push({ imgUrl: '', showDelImg: false, })}}) }})},// 删除图片按钮delImgBtn(index) {// 将这一项干掉this.uploadImgList.splice(index, 1)// 将图片框组的url传递出去this.$emit('chooseAfter', {imgUrlList: this.uploadImgList.filter(item => item.imgUrl).map(item => item.imgUrl),videoUrlList: this.uploadVideoList.filter(item => item.videoUrl).map(item => item.videoUrl)})// 如果每个url都有值加一个const addFlag = this.uploadImgList.every(item => item.imgUrl !== '')if(addFlag) {this.uploadImgList.push({ imgUrl: '', delImgShow: false })}// 如果都删完了，加一个上传的if(this.uploadImgList.length > 0) returnthis.uploadImgList.push({ imgUrl: '', delImgShow: false })},// 视频上传按钮uploadVideoBtn(index) {// 选择视频uni.chooseVideo({sourceType: ['camera', 'album'],success: (res) => {// console.log('本地', res);// 加载uni.showLoading({title: '正在上传'})// 上传具体操作uni.uploadFile({url: 'https://xxxxxx.cn/prod-api/api/file/img',filePath: res.tempFilePath,name: 'file',header: {'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjBmMjM0YjMyLWZkOTktNDdmZC1hZWQ1LTkwMTQzZmQwNTljYSJ9.FNefBR_Ai_aTCrJ4woYkZPR7QorwN-KwnwNeUim7aRxzSPCHPyFHvVnh5NsKjJJ2EHE6sSthBloMmMT_FLImyw'},success: (uploadFileJson) => {const fileObj = JSON.parse(uploadFileJson.data)if(fileObj.code !== 200) return// console.log('服务器', fileObj);// 关闭加载状态uni.hideLoading()// 回显this.uploadVideoList[index].videoUrl = fileObj.data.url// 显示单组的删除按钮this.uploadVideoList[index].showDelImg = true// 将图片和视频框组的url传递出去this.$emit('chooseAfter', {imgUrlList: this.uploadImgList.filter(item => item.imgUrl).map(item => item.imgUrl),videoUrlList: this.uploadVideoList.filter(item => item.videoUrl).map(item => item.videoUrl)})// 加一个上传单组, 超出最大上传数量，不再添加if(this.uploadVideoList.length >= this.count ) returnthis.uploadVideoList.push({ videoUrl: '', showDelImg: false })}}) }})},// 删除视频按钮delVideoBtn(index) {// 将这一项干掉this.uploadVideoList.splice(index, 1)// 将图片和视频框组的url传递出去this.$emit('chooseAfter', {imgUrlList: this.uploadImgList.filter(item => item.imgUrl).map(item => item.imgUrl),videoUrlList: this.uploadVideoList.filter(item => item.videoUrl).map(item => item.videoUrl)})// 如果每个url都有值加一个const addFlag = this.uploadVideoList.every(item => item.videoUrl !== '')if(addFlag) {this.uploadVideoList.push({ videoUrl: '', delImgShow: false })}// 如果都删完了，加一个上传的if(this.uploadVideoList.length > 0) returnthis.uploadVideoList.push({ videoUrl: '', delImgShow: false })},}
}
</script><style scoped lang='scss'>
image {width: 100%;height: 100%;
}
video {width: 100%;height: 100%;
}.container {// 单选框组.radio-group {display: flex;margin-bottom: 20rpx;.radio-single {display: flex;align-items: center;margin-right: 20rpx;.radio-icon {display: flex;justify-content: center;align-items: center;width: 30rpx;height: 30rpx;margin-right: 10rpx;border-radius: 50%;background-color: #cccccc;}.text {font-size: 28rpx;color: #444444;}}}// 图片和视频上传框组.image-group,.video-group {display: flex;.image-single,.video-single {position: relative;width: 208rpx;height: 208rpx;margin-right: 10rpx;.del-icon {position: absolute;right: 0;top: 0;width: 36rpx;height: 36rpx;z-index: 666;}}}
}
</style>

第二步

直接注册使用就行，全局的也好，局部的也好，chooseAfter参数接收即可，具体使用说明我写在代码中了

<ManyImgUpload :showToogle="false" :count="3" @chooseAfter="chooseAfter"></ManyImgUpload>

chooseAfter(res) {console.log(res);
}

封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量相关推荐

实现深拷贝还在用JSON.parse(JSON.stringfy(obj))？带你用JS实现一个完整版深拷贝函数
实现深拷贝还在用JSON.parse(JSON.stringify(obj))?带你用JS实现一个完整版深拷贝函数目录实现深拷贝还在用JSON.parse(JSON.stringify(obj)) ...
智能家居传感器：BME680--树莓派3B+ 搭配BME680的数据读取温湿度和气压。树莓派IIC BME680算法库完整版
这周更新了将BME680 数据上传到domoticz服务器部分的配置,主要的工作就是将本地已经获取到的数据上传到domoticz服务器上. 源码的地址:https://gitee.com/jeaso ...
Android照片墙完整版，完美结合内存方案 LruCache 和硬盘方案 DiskLruCache
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/34093441 在上一篇文章当中,我们学习了DiskLruCache的概念和基本用法 ...
千呼万唤，web人脸识别登录完整版来了，这样式我爱了
大家好,我是小富~ 在我最开始写文章的时候曾经写过一篇文章基于 Java 实现的人脸识别功能,因为刚开始码字不知道写点什么,就简单弄了个人脸识别的Demo. 但让我没想到的是,在过去的一年里有好多好 ...
在Docker中使用Dockerfile实现ISO文件转化为完整版Centos镜像，并搭建集群数据仓库
在Docker中使用Dockerfile实现ISO文件转化为完整版Centos镜像,并搭建集群数据仓库在上一篇文章中,我们提到了如何使用Docker官方版本的centos7搭建容器集群并实现同一ip ...
fastadmin html完整版,FastAdmin完整版(后台开发软件)
FastAdmin完整版这是一款全新的功能强大的后台开发框架应用软件,也是基于ThinkPHP5和Bootstrap打造的后台开发框架,是西西小编为用户精心带来的福利,强大的一键生成功,支持第三方插件 ...
c#自己封装一个轻量级ORM框架FastORM
在日常进行数据库操作的过程中,我的数据层使用的是微软企业库,但对于多字段的数据的插入与更新时写sql语句就会显得特别费时间,还会经常出现错误耗费时间排查,所以决定基于微软企业库封装一个轻量级的ORM框 ...
png的计算机储存图片的格式吗,我电脑打不开png格式的图片，如何解决？
我电脑打不开png格式的图片,如何解决?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 我电脑打不开png格式的图片,如 ...
php 获取内容页图片,织梦CMS如何从列表页获取内容页的图片
近日因工作发展的需要用织梦CMS做了个网站,其中有一个js展示学校作品的页面需要从该栏目的图片集中读取每个图片集的第一张图片到该页面,也就是从列表页获取内容页的图片. 百度和谷歌中搜索了一下只找到了从 ...

封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量

第一步

第二步

封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量相关推荐

最新文章

热门文章