39.上传多图功能开发 uni-app

最新推荐文章于 2024-07-20 17:39:15 发布
最新推荐文章于 2024-07-20 17:39:15 发布
阅读量460 收藏 1
点赞数 1
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyongyizhongxueli/article/details/108904710
版权

模仿官方例子：

查看

开发如下：

1.复制的html代码

<view class="uni-list list-pd">
            <view class="uni-list-cell cell-pd">
                <view class="uni-uploader">
                    <view class="uni-uploader-head">
                        <view class="uni-uploader-title">点击可预览选好的图片</view>
                        <view class="uni-uploader-info">{{imageList.length}}/9</view>
                    </view>
                    <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-shanchu" @tap="delete(index)"></view> -->
                                    
                                    <view class="icon iconfont icon-shanchu"  @tap="delete1(index)"></view>
                                    <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
                                </view>
                            </block>
                            <view class="uni-uploader__input-box">
                                <view class="uni-uploader__input" @tap="chooseImage"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

2. js代码

<script>
    var sourceType = [
        ['camera'],
        ['album'],
        ['camera', 'album']
    ]
    var sizeType = [
        ['compressed'],
        ['original'],
        ['compressed', 'original']
    ]
    let changelook=['所有人可见','仅自己可见'];
    import  uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
    export default {
        components:{uniNavBar},
        data() {
            return {
                yinshi: "所有人可见",
                text:"大家好，想发言就发吧",
                imageList: [],
                sourceTypeIndex: 2,
                sourceType: ['拍照', '相册', '拍照或相册'],
                sizeTypeIndex: 2,
                sizeType: ['压缩', '原图', '压缩或原图'],
                countIndex: 8,
                count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        methods: {
            // 删除图片
            
            chooseImage: async function() {
                // #ifdef APP-PLUS
                // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
                if (this.sourceTypeIndex !== 2) {
                    let status = await this.checkPermission();
                    if (status !== 1) {
                        return;
                    }
                }
                // #endif
            
                if (this.imageList.length === 9) {
                    // let isContinue = await this.isFullImg();
                    // console.log("是否继续?", isContinue);
                    // if (!isContinue) {
                    //     return;
                    // }
                    return;
                }
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    sizeType: sizeType[this.sizeTypeIndex],
                    count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    },
                    fail: (err) => {
                        // #ifdef APP-PLUS
                        if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
                            this.checkPermission(err.code);
                        }
                        // #endif
                        // #ifdef MP
                        uni.getSetting({
                            success: (res) => {
                                let authStatus = false;
                                switch (this.sourceTypeIndex) {
                                    case 0:
                                        authStatus = res.authSetting['scope.camera'];
                                        break;
                                    case 1:
                                        authStatus = res.authSetting['scope.album'];
                                        break;
                                    case 2:
                                        authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                                        break;
                                    default:
                                        break;
                                }
                                if (!authStatus) {
                                    uni.showModal({
                                        title: '授权失败',
                                        content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                                        success: (res) => {
                                            if (res.confirm) {
                                                uni.openSetting()
                                            }
                                        }
                                    })
                                }
                            }
                        })
                        // #endif
                    }
                })
            },
            
            previewImage: function(e) {
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: this.imageList
                })
            },
            async checkPermission(code) {
                let type = code ? code - 1 : this.sourceTypeIndex;
                let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
                    await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
                        'android.permission.READ_EXTERNAL_STORAGE');
            
                if (status === null || status === 1) {
                    status = 1;
                } else {
                    uni.showModal({
                        content: "没有开启权限",
                        confirmText: "设置",
                        success: function(res) {
                            if (res.confirm) {
                                permision.gotoAppSetting();
                            }
                        }
                    })
                }
            
                return status;
            },
            back(){
                uni.navigateBack({
                    delta:1
                })
                },
            submit(){
                console.log("发布");
            },
            changelook(){
                console.log("隐私");
                uni.showActionSheet({
                    itemList: changelook,
                    success: (res)=> {
                        this.yinshi=changelook[res.tapIndex];
                     
                        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                    }
                    // ,fail: function (res) {
                    //     console.log(res.errMsg);
                    // }
                });
                
            },
            delete1(index){
                uni.showModal({
                    title: '是否删除',
                    content: '是否删除',
                    success:  (res)=> {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            this.imageList.splice(index,1);
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                            
                        }
                    }
                });
                
            }
            }
        }
    
</script>

3.css代码

<style>
  .uni-textarea{
      border: 1upx solid #eeeeee;
  }
  .cell-pd {
      padding: 22rpx 30rpx;
  }
  
  .list-pd {
      margin-top: 50rpx;
  }
  .uni-uploader__file{
      position: relative;
  }
  .icon-shanchu{
    position: absolute;
    top: 0;
    right: 0;
    background: #333333;
    color: #ffffff;
    padding: 2upx 10upx;
    border-radius: 10upx;
    z-index: 1000;
  }
</style>

附录：完整代码

<template>
    <view>
        <!-- 自定义导航栏 -->
        
        <uni-nav-bar  :statusBar="true" rightText="发布" left-icon="arrowleft"  @clickLeft="back"  @clickRight="submit">
           <view class="u-f-ajc" @tap="changelook">
               {{yinshi}}
              <view class="icon iconfont icon-xialazhankai"></view>                       
           </view>
        </uni-nav-bar>
        <!-- 多行输入框 -->
        <textarea class="uni-textarea" v-model="text" placeholder="发布信息" />
        <!-- 多图片上传 -->
        <view class="uni-list list-pd">
            <view class="uni-list-cell cell-pd">
                <view class="uni-uploader">
                    <view class="uni-uploader-head">
                        <view class="uni-uploader-title">点击可预览选好的图片</view>
                        <view class="uni-uploader-info">{{imageList.length}}/9</view>
                    </view>
                    <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-shanchu" @tap="delete(index)"></view> -->
                                    
                                    <view class="icon iconfont icon-shanchu"  @tap="delete1(index)"></view>
                                    <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
                                </view>
                            </block>
                            <view class="uni-uploader__input-box">
                                <view class="uni-uploader__input" @tap="chooseImage"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        
    </view>
</template>

<script>
    var sourceType = [
        ['camera'],
        ['album'],
        ['camera', 'album']
    ]
    var sizeType = [
        ['compressed'],
        ['original'],
        ['compressed', 'original']
    ]
    let changelook=['所有人可见','仅自己可见'];
    import  uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
    export default {
        components:{uniNavBar},
        data() {
            return {
                yinshi: "所有人可见",
                text:"大家好，想发言就发吧",
                imageList: [],
                sourceTypeIndex: 2,
                sourceType: ['拍照', '相册', '拍照或相册'],
                sizeTypeIndex: 2,
                sizeType: ['压缩', '原图', '压缩或原图'],
                countIndex: 8,
                count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        methods: {
            // 删除图片
            
            chooseImage: async function() {
                // #ifdef APP-PLUS
                // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
                if (this.sourceTypeIndex !== 2) {
                    let status = await this.checkPermission();
                    if (status !== 1) {
                        return;
                    }
                }
                // #endif
            
                if (this.imageList.length === 9) {
                    // let isContinue = await this.isFullImg();
                    // console.log("是否继续?", isContinue);
                    // if (!isContinue) {
                    //     return;
                    // }
                    return;
                }
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    sizeType: sizeType[this.sizeTypeIndex],
                    count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    },
                    fail: (err) => {
                        // #ifdef APP-PLUS
                        if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
                            this.checkPermission(err.code);
                        }
                        // #endif
                        // #ifdef MP
                        uni.getSetting({
                            success: (res) => {
                                let authStatus = false;
                                switch (this.sourceTypeIndex) {
                                    case 0:
                                        authStatus = res.authSetting['scope.camera'];
                                        break;
                                    case 1:
                                        authStatus = res.authSetting['scope.album'];
                                        break;
                                    case 2:
                                        authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                                        break;
                                    default:
                                        break;
                                }
                                if (!authStatus) {
                                    uni.showModal({
                                        title: '授权失败',
                                        content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                                        success: (res) => {
                                            if (res.confirm) {
                                                uni.openSetting()
                                            }
                                        }
                                    })
                                }
                            }
                        })
                        // #endif
                    }
                })
            },
            
            previewImage: function(e) {
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: this.imageList
                })
            },
            async checkPermission(code) {
                let type = code ? code - 1 : this.sourceTypeIndex;
                let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
                    await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
                        'android.permission.READ_EXTERNAL_STORAGE');
            
                if (status === null || status === 1) {
                    status = 1;
                } else {
                    uni.showModal({
                        content: "没有开启权限",
                        confirmText: "设置",
                        success: function(res) {
                            if (res.confirm) {
                                permision.gotoAppSetting();
                            }
                        }
                    })
                }
            
                return status;
            },
            back(){
                uni.navigateBack({
                    delta:1
                })
                },
            submit(){
                console.log("发布");
            },
            changelook(){
                console.log("隐私");
                uni.showActionSheet({
                    itemList: changelook,
                    success: (res)=> {
                        this.yinshi=changelook[res.tapIndex];
                     
                        // console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
                    }
                    // ,fail: function (res) {
                    //     console.log(res.errMsg);
                    // }
                });
                
            },
            delete1(index){
                uni.showModal({
                    title: '是否删除',
                    content: '是否删除',
                    success:  (res)=> {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            this.imageList.splice(index,1);
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                            
                        }
                    }
                });
                
            }
            }
        }
    
</script>

<style>
  .uni-textarea{
      border: 1upx solid #eeeeee;
  }
  .cell-pd {
      padding: 22rpx 30rpx;
  }
  
  .list-pd {
      margin-top: 50rpx;
  }
  .uni-uploader__file{
      position: relative;
  }
  .icon-shanchu{
    position: absolute;
    top: 0;
    right: 0;
    background: #333333;
    color: #ffffff;
    padding: 2upx 10upx;
    border-radius: 10upx;
    z-index: 1000;
  }
</style>
 

liyongyizhongxueli
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app自定义组件（数据传递、自定义弹框、自定义图片选择）
yyxhzdm的博客
09-07 1324
效果图： 自定义组建的步骤： 1.在项目中创建目录：components 2.新建组件.vue 文件 例如：AddImgs.vue 3.组件文档结构 实例： 4.使用组件 实例： 5.接下来，我将其中图片选择的自定义组件代码粘贴出来 （1）.子组件： <template name="AddImgs"> <view class="content"> <view class="image-wrap"&g...
跨平台应用开发进阶(四) ：uni-app 实现上传图片(2)
2401_84447262的博客
05-04 180
⚠️本人并不认可，经过实践可知，该接口只能实现客户端将图片资源上传到。后台服务器中，并不支持本地服务器，故并不满足功能需求，需谨慎使用。项目实现页面大致逻辑如下，完整页面实现逻辑可移步《的免费存储和cdn中，一站式集成。接口从本地相册选择图片或使用相机拍照。选择照片大多为了上传，组件，文件选择、上传到。
uniapp自定义弹窗之随时更换弹窗背景的实现
一粒程序米
02-15 2160
自定义弹窗之随时更换背景图
uni-app为组件uni-icons增加自定义图标(超简单)
Jackson991的博客
07-30 4513
转载： https://www.cnblogs.com/wanggang2016/p/12310945.html
uniapp，vue3上传图片组件封装
最新发布
m0_68331234的博客
07-20 406
下面是 vip组件的封装 也就是图片上传组件 只是我的命名是随便起的。首先创建一个 components 文件在里面进行组件的创建。
uni-app的基本使用
c_qianxia5040的博客
01-19 5511
uni-app的基本使用 课程介绍： 基础部分： 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 条件注释 跨端兼容 uni中的事件 导航跳转 组件创建和通讯 uni-app介绍 uni-app 是 一个使用vue.js开发所有前端应用的矿建，开发者编写一套代码，可发布到IOS、Android、H5、以及各种小程序（微信、支付宝、百度、头条、qq、钉钉）等多个平台 即使不跨端，uni-app同时也是更好的小程序开发框架 有vue和微信小程序的开
uni.showModal不好使
thingir的博客
03-29 2904
一、代码 uni.showModal({ title:'确定操作', content:'吧啦吧啦一大段文字', cancelText:'暂不切换', confirmText:'我已知晓,确认切换', success: (res) => { if(res.confirm){ }else{ } } }) 二、问题 使用 uni.showModal 弹出，配置了确定和取消按钮的文字和颜色，然后点击按钮触发modal,没反应 删除自己配置的确定和取消按钮文字，发现好
跨平台应用开发进阶(四) ：uni-app 实现上传图片
2401_84447262的博客
05-04 186
应用uni-app开发跨平台App项目时，上传图片、文档等资源功能需求十分常见：点击相框按钮可选择图片上传，点击每一个图片可以进行预览，点击每个图片删除图标可删除对应图片。本地相册选择图片或使用相机拍照上传图片；可以预览选择上传的图片；删除选错或不选的图片；
uni-app开发商城类小程序
01-22
uni-app是一款由DCloud(海豚浏览器团队)推出的多端开发框架，它允许开发者编写一次代码，即可在iOS、Android、H5、微信小程序、支付宝小程序、百度小程序等多个平台上运行。这个框架的核心是基于Vue.js，因此开发者...
Uni-App模块化开发的组件封装
12-31
Uni-App，作为一款基于H5、小程序、APP多端统一开发的框架，充分利用了Vue.js的特性，使得开发者可以方便地进行组件封装，实现模块化开发。本篇文章将深入探讨如何在Uni-App中进行组件封装以及相关的事件模块处理。 ...
uni-app 多图上传组件
08-06
在uni-app中，我们经常需要实现多图上传功能，这对于用户体验至关重要，特别是对于那些需要用户上传照片作为内容的应用。由于后端开发尚未提供专门的多图上传接口，我们需要自己处理这一问题，通过前端技术来实现在...
uni-app优医问诊-配套资料
05-04
uni-app是一个多端开发框架，它允许开发者使用Vue.js语法编写一次代码，就可以在iOS、Android、H5、小程序等多个平台上运行，极大地提高了开发效率。 该配套资料可能包括了以下关键知识点： 1. **uni-app基础**：...
uni-app实战直播app全栈开发.zip
05-23
uni-app是一个基于Vue.js的多端开发框架，旨在简化跨平台应用的开发流程，支持包括H5、微信小程序、支付宝小程序、百度小程序、QQ小程序、快应用以及原生APP等在内的多种平台。 【描述】"uni-app实战直播app全栈...
uniapp 提示框(showToast、showModal、showLoading)
weixin_44504531的博客
10-02 2万+
uniapp (showToast、showModal、showLoading)
uniapp中自定义showModal样式
在无知中学习，在学习中成长，在成长中学习
07-23 1万+
uniapp中自定义showModal样式页面中使用在main.js中引入show-modal组件创建组件show-modal组件名称show-modal.vue创建initModal.js 页面中使用 <show-modal></show-modal> this.$showModal({ title: '', content: '当', cancelText:"取消", confirmText:"生成赛果", success(res) {
uniapp自带的显示消息提示框（uni.showToast，uni.showModal）。
m0_75047254的博客
07-16 1万+
【代码】uniapp自带的显示消息提示框（uni.showToast，uni.showModal）。
【uniapp基础篇】上传图片
热门推荐
业余丰富各种技术栈
08-27 3万+
【uniapp基础篇】上传图片，实现uniapp手机端上传图片,以及图片上传进度的监听
uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消
祈澈菇凉
06-29 5992
参考文档：https://uniapp.dcloud.io/api/ui/prompt?id=showmodal 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。 uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: functi...
uniapp-form表单（1）
m0_75047254的博客
07-26 1840
属性说明属性名类型默认值说明生效时机平台差异说明sizeStringdefault按钮的大小typeStringdefault按钮的样式类型plainBooleanfalse按钮是否镂空，背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带 loading 图标H5、App(App-nvue 平台，在 ios 上为雪花，Android上为圆圈)form-typeString用于<form>
uni-app从0到1：一套代码多平台运行实战教程
"uni-app是一个跨平台的前端框架，它允许开发者编写一次代码，即可部署到Android、iOS、小程序等多个平台，从而极大地提高了开发效率。本教程详细介绍了uni-app的各个方面，包括从环境搭建到实际项目的创建和运行，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值