微信小程序上传图片和文件
要有遥不可及的梦想,也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)
<image src="/static/images/addimg.png" bindtap="chooseImage"></image>
然后给这个图标或者按钮写上点击事件chooseImage(事件名称随意定义)
然后还需要写一个盒子,用来存放选择好的文件缩略图,缩略图上写上删除按钮,供删除,并且要实现点击缩略图展示大图的功能,下面是我写的整体内容
<view class="imgbox"> <!-- 存放上传的图片的盒子 --> <block wx:for="{ {images}}" wx:key="this"> <view class="add"> <!-- 图片缩略图 --> <image src="{ {item}}" mode="aspectFill" data-idx="{ {index}}" bindtap="handleImagePreview"></image> <!-- 移除图片的按钮 --> <view class="delete" data-idx="{ {index}}" bindtap="removeImage">删除</view> </view> </block> <image src="/static/images/addimg.png" bindtap="chooseImage"></image> </view>
images: 是用来存放选择图片的数组,js定义
handleImagePreview:查看大图的点击事件
removeImage:删除已选择的图片的点击事件
下面是样式文件,可自由调整
.imgbox{ width: 100%; min-height: 70rpx; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .imgbox image{ width: 70rpx; height: 70rpx; } .add{ display: flex; flex-direction: column; align-items: center; margin-right: 20rpx; } .delete{ font-size: 24rpx; color: #E60000; }
然后是js文件:
Page({ /** * 页面的初始数据 */ data: { images: [], }, //点击添加按钮选择图片 chooseImage: function (e) { wx.chooseImage({ sizeType: [original, compressed], //可选择原图或压缩后的图片 sourceType: [album, camera], //可选择性开放访问相册、相机 success: res => { const images = this.data.images.concat(res.tempFilePaths) this.setData({ images: images }) } }) }, // 删除图片 removeImage(e) { const idx = e.target.dataset.idx; this.data.images.splice(idx, 1); var del_image = this.data.images; this.setData({ images: del_image }) }, // 查看大图 handleImagePreview(e) { const idx = e.target.dataset.idx const images = this.data.images wx.previewImage({ current: images[idx], //当前预览的图片 urls: images, //所有要预览的图片 }) }, })
到此是已经完成了图片选择,删除,预览的功能
最后是上传:
需要注意的是,上传图片的时候只能单张上传,因此当我们选择了多张图片之后,需要分开一张一张的上传,因此需要写一个for循环。
点击上传按钮进行操作:
var that = this; let images = this.data.images let img = [] if (images.length > 0) { for (var i = 0; i < images.length; i++) { wx.getImageInfo({ src: images[i], success(res) { wx.uploadFile({ url: api.Cg_TousuUpload + ?session_id= + wx.getStorageSync(session_id), //上传图片接口地址 filePath: res.path, name: wxfiles, formData: null, timeout: 60000, formData: { //这里面可以放一些后端要的其他参数 }, success: function (res) { if (JSON.parse(res.data).code == Y) { //上传成功之后,后端会返回你图片的线上地址,名称和一个id if (images.length == img.length) { //相等说明已经上传完毕 } } }, fail: function (error) {} }) } }) } }
这个是上传图片的步骤,上传附件跟上传图片大致类似,下面是上传附件的步骤
// 文件上传 chooseFile() { var that = this wx.chooseMessageFile({ count: 1, type: file, success(res) { var file = voucherData.matterapply_file const tempFilePaths = res.tempFiles that.setData({ files: tempFilePaths }) } }) }, // 删除文件 removefile() { this.setData({ files: [] }) },
我这里是只允许选择一张附件,如果要选择多个附件,参照图片功能即可,
var that = this; let files = that.data.files if (files.length > 0) { wx.uploadFile({ url: api.Cg_TousuUpload + ?session_id= + wx.getStorageSync(session_id), //上传附件接口地址 filePath: res.path, name: wxfiles, formData: null, timeout: 60000, formData: { //这里面可以放一些后端要的其他参数 }, success: function (res) { if (JSON.parse(res.data).code == Y) { //上传成功之后,后端会返回你附件的线上地址,名称和一个id } }, fail: function (error) {} }) }
好了,就是这些,有问题咨询,希望能帮助到一些人吧!!!
上一篇:
uniapp开发微信小程序-2.页面制作
下一篇:
与百度智能小程序的第一次邂逅