微信小程序上传单张或多张图片

上传作品图片，上传头像（count=1），亲测有效

分享一下核心代码，希望能帮助大家

1.wxml

<!-- 上传作品 -->
<view class='upload-works' style='height:{{screenHeight}}px' wx:if="{{isUpWork}}"><view class='work-box'><view class='works-tit'>图片上传：</view><view class='works-img'><view class="img" wx:for="{{worksImgs}}" wx:for-item="item" wx:key="*this"><!-- 图片缩略图  --><image src="{{item}}" mode="aspectFill"></image><!-- 移除图片的按钮  --><view class="delete-btn" data-index="{{index}}" catchtap="deleteImg">删除</view></view><view class='img iconfont icontianjia' wx:if="{{worksImgs.length<9}}" bindtap="chooseImage"></view></view></view><!-- 按钮 --><view class='btns'><button class='cancle' catchtap='cancleWorks'>取消</button><button class='submit' catchtap='submitWorks'>提交</button></view>
</view>

2.js

chooseImage: function () {let that = this;let worksImgs = that.data.worksImgs;let len = that.data.worksImgs.length;wx.chooseImage({count: 9 - len, //最多选择9张图片sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log(res);// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片if (res.tempFilePaths.count == 0) {return;}let tempFilePaths = res.tempFilePaths;// let token = app.data.uptoken;//上传图片 循环提交for (let i = 0; i < tempFilePaths.length; i++) {wx.uploadFile({url: 'url', //此处换上你的接口地址 filePath: tempFilePaths[i],name: 'upload_file',header: {"Content-Type": "multipart/form-data",'accept': 'application/json',},success: function (res) {console.log(res);let data = JSON.parse(res.data); // 这个很关键worksImgs.push(data.data.url);that.setData({worksImgs: worksImgs})}})}}})},// 删除上传的图片deleteImg: function (e) {var worksImgs = this.data.worksImgs;var itemIndex = e.currentTarget.dataset.index;worksImgs.splice(itemIndex, 1);this.setData({worksImgs: worksImgs})},// 提交个人作品submitWorks:function(){let that = this;let worksImgs = String(that.data.worksImgs);let obj = {store_id: that.data.store_id,mode_id: that.data.mode_id,works_img: worksImgs,works_info: that.data.works_info, is_xs : 1}if (obj.works_img.length == 0 || obj.works_info == ''){wx.showModal({title: '提示',content: '数据不能为空！',showCancel: false,})}else{utils.postRequest('Mode/worksAdd', obj, '加载中', (res) => {if (res.data.rc == 200) {wx.showModal({title: '提示',content: '作品上传成功',showCancel: false,success: function (res) {if (res.confirm) {that.setData({isUpWork: false})that.onShow();}}})} else {wx.showModal({title: '提示',content: '作品上传失败',showCancel: false,success: function (res) {if (res.confirm) {that.setData({isUpWork: false})that.onShow();}}})}})}},

注意：微信公众平台小程序，开发栏目uploadFile合法域名，一定要配置图片保存的域名，例如：七牛云等等

微信小程序上传单张或多张图片相关推荐

《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...
微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
spring boot接收微信小程序上传的文件
spring boot接收微信小程序上传的文件,首先前台传给我们后端的不是一个路径,而是以一个文件类型传递给我,这时我们在controller层接收时就可以用MultipartFile进行接收,如果接 ...

微信小程序上传单张或多张图片

上传作品图片，上传头像（count=1），亲测有效

微信小程序上传单张或多张图片相关推荐

最新文章

热门文章