小程序多图上传
wxml
1 2 3 4 | < view class="images" bindtap="upload"> < image src="../../images/icon_shangchuan.png"></ image > < text >添加图片</ text > </ view > |
wxss
1 2 3 4 5 6 7 8 9 10 11 12 13 | .images{ width: 134rpx; height: 134rpx; border:1px dashed #D8D8D8; display: flex; flex-direction: column; justify-content: center; align-items: center; } .container .images image{ width: 60rpx; height: 60rpx; } |
wx.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | upload: function (e) { var that = this; // 上传图片的提示 if (that.data.uploaderNum >= 10) return wx.showToast({ title: "最多只能上传" + '10' + "张图", duration: 2500, icon: "none" }), !1; //选择图片 wx.chooseImage({ count: 10 - that.data.uploaderNum, // 默认10 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 that.data.uploaderList.concat(res.tempFilePaths); var uploaderList = res.tempFilePaths; that.setData({ uploaderList: that.data.uploaderList.concat(res.tempFilePaths), }) that.setData({ uploaderNum: that.data.uploaderList.length }) for (var i = 0; i < uploaderList.length; i++) { wx.uploadFile({ url: getApp().globalData.url+'/api/upload/upload', filePath: uploaderList[i], name: 'file', // 需要传的参数 formData: { 'user': 'test' }, success: function (res) { that.setData({ tu:that.data.tu.concat(getApp().globalData.url + "/" + JSON.parse(res.data).data.path) }) } }) } } }) }, |
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从二进制到误差:逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人:结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
· C# 13 中的新增功能实操
· Supergateway:MCP服务器的远程调试与集成工具