php本地怎么接受小程序图片,小程序如何本地上传图片跟事情绑定—小程序入门与实战【十八】...

上一章节我们着重讲了 textarea 表单组件。

这一章节我们来讲解如何在本地相册选择图片并且上传到服务器。

先来讲解一下实现业务的逻辑，我们需要点击设计稿的 “上传照片” 按钮，如下图：

image

先从手机相册选择照片，然后将选择的照片上传到服务器，然后得到网络地址之后渲染。

点击事件绑定

使用bindtap    Click here!

如果用户点击这个 view ，则页面的handleTap会被调用。

果酱先生代码如下：                                        上传照片                

我们定义了一个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() 粗来

打印如图所示：

image

是一个数组。

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

然后循环数组：                                                                                                                                            上传照片                                    

这里做了处理，上传到7张图片不允许继续上传。

删除图片

至此，我们上传图片的功能做好了，那我们上传图片之后还是可以删除的，现在我们来写这个功能。

解析：

在这个 icon 上面定义一个点击事件， 我们需要知道我们点击删除的是那一张图片，需要传入数组的下标值index来判断是哪一张图片需要删除。

小程序传参的方法是data-xx,

获取参数的办法为：e.currentTarget.dataset.xxdeleteimg(e){        let  index = e.currentTarget.dataset.index;        this.data.imgList.splice(index, 1);        this.setData({            imgList:this.data.imgList            }        )    }

总结点绑定点击事件，并传参

wx.chooseImage(),从本地相册选择图片或使用相机拍照。

wx.uploadFile(),上传本地文件到服务器。

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