上一章节我们着重讲了 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
                        })
                    }

                })
            }
        })
    }

wx.chooseImage()

从本地相册选择图片或使用相机拍照。

常用参数：

• count：最多可以选择的图片张数 ，为 number 类型。
• sourceType：选择图片的来源，默认值为['album', 'camera']相机，还可以相册 album。
• success：接口调用成功的回调函数
• tempFilePaths：图片的本地临时文件路径列表 (本地路径)
• tempFiles：图片的本地临时文件列表

let tempFilePaths = res.tempFilePaths;

//拿到本地路径之后赋值给 tempFilePaths ,我们可以将这个数据 console.log() 粗来

打印如图所示：

是一个数组。

wx.uploadFile()

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

常用参数

• url：开发者服务器地址，也就是我们常说的接口
• filePath：要上传文件资源的路径 (本地路径)
• name：文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
• header：HTTP 请求 Header，Header 中不能设置 Referer
• success：接口调用成功的回调函数
• data：开发者服务器返回的数据
• statusCode：开发者服务器返回的 HTTP 状态码

果酱先生代码部分解析：

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
            }
        )
    }

总结

• 点绑定点击事件，并传参
• wx.chooseImage(),从本地相册选择图片或使用相机拍照。
• wx.uploadFile(),上传本地文件到服务器。

下一章节我们呢讲解如果发布打卡，跟发布打卡之后我们应该做一些什么样子的处理。