微信小程序图片上传并移除
微信小程序图片上传并移除
微信小程序图片上传
ps: 最近项目使用到图片上传, 通过api中
wx.chooseImage(Object object)
、wx.uploadFile
实现
需求:
- 最多上传
3张图片
,当第三张图片时,添加按钮
隐藏, 反之显示 - 每添加一张图片时,显示
删除icon
, 实现删除功能
。
文章目录
- 微信小程序图片上传
- 官方API
- 效果图
- 1. 选择图片并上传到服务器
- `选择图片`返回数据效果图
- `上传到服务器`数据效果图
- 2. 提交事件
- `提交图片`请求效果图
- 3. 删除图片
- 4. wxml
- 5. wxss
官方API
wx.chooseImage(Object object)
wx.uploadFile(Object object)
效果图
1. 选择图片并上传到服务器
这里选择
每张图片
时,上传
到服务器,最后把图片的地址
提交给后端。
- 通过
wx.chooseImage
选择图片或拍照,回调成功
后把返回图片数据
保存。然后在wx.uploadFile
时作为参数传入资源的路径
。 - 使用
wx.uploadFile
将本地资源上传到服务器
,回调成功
后把返回的path
字段存在到一个数组中。 - 最后: 把数组里的图片
path
及其他内容一起提交给后台。(案例中以逗号
分隔格式)。
选择图片
返回数据效果图
wx.chooseImage
返回数据
上传到服务器
数据效果图
wx.uploadFile
请求接口返回数据
/*** 页面的初始数据*/
data: {hideAddImg: false, //隐藏添加按钮图片files: [],uploadImgArr: [],
},/*** 上传图片事件*/
chooseImage: function (e) {var that = this;wx.chooseImage({sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片//console.log(res);that.setData({files: that.data.files.concat(res.tempFilePaths[0])});//console.log(res.tempFilePaths[0]);//大于3张, 隐藏 添加按钮if(that.data.files.length >= 3) {that.setData({hideAddImg: true})}// 将本地资源上传到服务器//备注: 每选择一张图片上传到服务器,并保存在数组中。提交时:把数组数据上传var token = wx.getStorageSync('Authorized-Token') || ''wx.uploadFile({url: http.rootDocment +'user/upload-img',filePath: res.tempFilePaths[0],name: 'img',header:{'Authorized-Token': token,'content-type':'multipart/form-data'},success(res) {var infoData = JSON.parse(res.data);if (infoData.code==200){// 保存返回的 图片路径that.setData({uploadImgArr: that.data.uploadImgArr.concat(infoData.data.path)});}else{//操作失败}}})}})
},
2. 提交事件
/*** 提交事件*/
repairsSubmit: function() {var that = this;//省略 非空判断var params = {mini_img: that.data.uploadImgArr.join(","),}http.postReq('order/repair', params, function (res) {if (parseInt(res.code) == 200) {//提交成功}else{//失败}})
},
提交图片
请求效果图
3. 删除图片
/*** 删除图片 事件*/
removeImg: function(e) {var that = this;var index = e.currentTarget.dataset.index;//console.log(that.data.files.splice(index, 1))//小于 3张时, 添加按钮显示if(that.data.files.length <= 3) {that.setData({hideAddImg: false})}that.data.files.splice(index, 1);that.data.uploadimgarr.splice(index, 1);that.setData({files: that.data.files,uploadimgarr: that.data.uploadimgarr})
},
4. wxml
<view class="uploadImgBox"><view class="desc">请拍摄相关的图片,便于工作人员维修</view><view class="clearfix imgList"><!-- 遍历数组 --><view wx:for="{{files}}" wx:key="*this" wx:for-index="bindIndex"><view class="item"><image src="{{item}}" mode="aspectFill"></image><!-- 删除icon 自定义属性 拿当前下标--><view class="removeBtn" bindtap="removeImg" data-index="{{bindIndex}}"><image src="/libs/assets/images/icon/del.png" mode="aspectFill"></image></view></view></view><!-- 添加图片按钮 --><view><view class="item addImg" bindtap="chooseImage" hidden="{{hideAddImg}}"><image src="/libs/assets/images/icon/addImg.png" mode="aspectFill"></image></view></view></view>
</view>
5. wxss
在项目中配置scss自动编译wxss
可参考这个配置流程
.uploadImgBox {.desc {@include sc(13px, #edb353);height: 57rpx;@include fc;background-color: #f9f3e8;padding-left: 35rpx;}.imgList {margin: 31rpx 26rpx 31rpx 5rpx;>view {display: inline-block;float: left;padding-left: 29rpx;.item {@include wh(210rpx, 210rpx);position: relative;.removeBtn {position: absolute;right: 0rem;top: 0rem;@include wh(50rpx, 50rpx);i {font-size: 20px;position: absolute;right: 0;top: -1px;color: #000;opacity: .5;}image {@include wh(100%, 100%);@include borderRadius(0 11rpx 0 0);}}image {@include wh(100%, 100%);@include borderRadius(11rpx);}}.addImg {// @include fcc;// border: 1px dashed #aaa;// img {// @include wh(.84rem, .72rem);// }}}}
}