小程序如何本地上传图片跟事情绑定—小程序入门与实战【十八】

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

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

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

image

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

点击事件绑定

使用 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() 粗来

打印如图所示:

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

然后循环数组:

<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(),上传本地文件到服务器。

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