微信小程序实现文件上传
2021/5/20 20:55:06
本文主要是介绍微信小程序实现文件上传,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
uploads.wxml
<view class="picture"> <text class='index-4'>上传带看截图: </text> <view class='proofimgs'> <view class='pick' bindtap="chooseImg"> + </view> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image class='imgSelected' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap='previewImg'></image> <image class='del' src='/images/null.jpg' data-index="{{index}}" catchtap="deleteImg"></image> </view> </view> </view>
uploads.wxss
.index-4 { margin-left: 85rpx; color: #fff; padding-top: 20rpx; display: block; } .proofimgs { margin-top: 20rpx; margin-left: 90rpx; width: 73%; } .pick { width: 150rpx; height: 150rpx; color: #fff; background: #000; text-align: center; opacity: 0.6; border-radius: 30rpx; font-size: 100rpx; font-weight: bold; } .img { display: flex; align-items: top; margin-top: 20rpx; } .imgSelected { width: 100%; } .del { width: 40rpx; height: 40rpx; margin-top: -20rpx; margin-left: -20rpx; }
uploads.js
data: { index: 0, multiIndex: [0, 0], //传到后台的课程分类 cname: '', imgs: [], proof: '' }, //选择图片 chooseImg: function(e) { var that = this; console.log(that); if (that.data.cname == '') { } else { var imgs = this.data.imgs; if (imgs.length >= 9) { this.setData({ lenMore: 1 }); setTimeout(function() { that.setData({ lenMore: 0 }); }, 2500); return false; } } wx.chooseImage({ // count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; var imgs = that.data.imgs; console.log(res,5255); // console.log(tempFilePaths + '----'); for (var i = 0; i < tempFilePaths.length; i++) { if (imgs.length >= 9) { that.setData({ imgs: imgs }); return false; } else { imgs.push(tempFilePaths[i]); } } // console.log(imgs); that.setData({ imgs: imgs, }); //循环把图片上传到服务器 for (var i = 0; i < imgs.length; i++) { wx.uploadFile({ url: '', filePath: imgs[i], name: 'files', formData: { cname: that.data.cname }, success: function(res) { var hhsd = res.data.replace(/\"/g, ""); that.data.proof = that.data.proof.concat(hhsd + ','); that.setData({ proof: that.data.proof }); } }) } } }); }, // 删除图片 deleteImg: function (e) { var imgs = this.data.imgs; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ imgs: imgs }); }, // 预览图片 previewImg: function (e) { //获取当前图片的下标 var index = e.currentTarget.dataset.index; //所有图片 var imgs = this.data.imgs; wx.previewImage({ //当前显示图片 current: imgs[index], //所有图片 urls: imgs }) },
这篇关于微信小程序实现文件上传的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践