上一章节我们着重讲了 textarea 表单组件。
这一章节我们来讲解如何在本地相册选择图片并且上传到服务器。
先来讲解一下实现业务的逻辑,我们需要点击设计稿的 “上传照片” 按钮,如下图:
先从手机相册选择照片,然后将选择的照片上传到服务器,然后得到网络地址之后渲染。
使用 bindtap
<view bindtap="handleTap">
Click here!
</view>
如果用户点击这个 view ,则页面的 handleTap
会被调用。
果酱先生代码如下:
<view class="chooseimg" bindtap="uploadimage">
<view class="iconfont icon-juxing addimg"></view>
<span>上传照片</span>
</view>
我们定义了一个 uploadimage
函数,只要我们点击,就会触发事情。
uploadimage
函数如下:
data:{
imgList:''
},
uploadimage(){
wx.chooseImage({
count:1,
success: res => {
//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
let tempFilePaths = res.tempFilePaths;
let token = wx.getStorageSync('user_token');
//将本地资源上传到开发者服务器,客户端发起一个HTTP post请求,其中content-type为multipart/form-data
wx.uploadFile({
header: {
Authorization: token
},
url:config.GLOBAL.baseUrl + 'api/sir/upload/card/img',
filePath: tempFilePaths[0],
name: 'img',//这个是你跟后端协议好的key值
success:ret=>{
//数据做处理,如果你不懂可以console出来
let result = JSON.parse(ret.data);
this.data.imgList.push(result.data.url);
this.setData({
imgList:this.data.imgList
})
}
})
}
})
}
从本地相册选择图片或使用相机拍照。
number
类型。['album', 'camera']
相机,还可以相册 album
。let tempFilePaths = res.tempFilePaths;
//拿到本地路径之后赋值给 tempFilePaths ,我们可以将这个数据 console.log() 粗来
打印如图所示:
是一个数组。
将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data。
果酱先生代码部分解析:
filePath: tempFilePaths[0] //拿chooseImage返回的临时路径的第一个
name: 'img' // img为与后端协定一致的字符串
header: {
Authorization: token
}
//header 中带入 token
我们将得到的数据做处理,赋值给 this.data.imgList
然后循环数组:
<view class="share-wrap">
<view class="share-item" wx:for="{{imgList}}" wx:key="index">
<view class="share-img bgsize" style="background-image: url({{item}})">
</view>
<view class="iconfont icon-shibai delete"></view>
</view>
<view class="share-item item_dashed" wx:if="{{imgList && imgList.length < 6}}">
<view class="chooseimg" bindtap="uploadimage">
<view class="iconfont icon-juxing addimg"></view>
<span>上传照片</span>
</view>
</view>
</view>
这里做了处理,上传到7张图片不允许继续上传。
至此,我们上传图片的功能做好了,那我们上传图片之后还是可以删除的,现在我们来写这个功能。
<view class="iconfont icon-shibai delete" bindtap="deleteimg" data-index="{{index}}"></view>
解析:
在这个 icon 上面定义一个点击事件, 我们需要知道我们点击删除的是那一张图片,需要传入数组的下标值 index
来判断是哪一张图片需要删除。
小程序传参的方法是 data-xx
,
获取参数的办法为:e.currentTarget.dataset.xx
deleteimg(e){
let index = e.currentTarget.dataset.index;
this.data.imgList.splice(index, 1);
this.setData({
imgList:this.data.imgList
}
)
}
下一章节我们呢讲解如果发布打卡,跟发布打卡之后我们应该做一些什么样子的处理。