范围:深圳yaboapp开发,软件定制开发,yaboapp软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

yabo-微信小程序开发图片上传功能

06-22 yaboAPP
摘要:本文测验考试往相册内传图功能,这需要小法式和办事器真个两重撑持。

本文测验考试往相册内传图功能,这需要小法式和办事器真个两重撑持。

办事器端

我们需要数据库的撑持,还记得第8篇说的阿谁photo数据表么,在这里我们进行一次点窜然后再新增一个表。

相册表

存储每次照片的提交和对本次提交的备注。

/

相册图片表

现实存储每一个照片,包括图片的路径等,此中photo_id为photo表的主键ID。

/

此刻有了数据表我们再做两个节制器,别离用来办事在photo和photo_item表。

/

接下来我们来打算一下添加相片的逻辑,看下图。

/

当点击了“提交”按钮后,会新家一条photo记实然后返回给小法式,小法式最先现实的传图进程并携带新photo记实的id来填充photo_item表。

这里有一点要留意的,就是针对photo记实的新建直接利用yii2的restful --- create 便可以了,可是对传图纷歧样,触及到领受图片、存储等等等等。

是以我们对PhotoItemController的create方式进行了重写,以下图,这里也为你展现了yii2中restful若何重写内置的action。

/

然后我们本身界说一个create,看下图。

/

经由过程yii2的UploadedFile类来领受小法式过来的图片而且连结,同时成立一笔记录。

小法式

在小法式端分两步

1、要求办事器POST /xcx/photos 新建一条photo记实(所属相册、描写)

2、新建photo记实成功,携带文件要求POST /xcx/photo-items 新建一条photo_item记实(所属相册ID、photoID、图片路径、类型等)

正式最先

新建一条photo记实

这个进程触及到了一个小法式组件 -- picker,也就是转动选择器,它能领受一个数组或对象数组,我们这里利用它来选择所属相册,先看结果。

width=700

当页面预备好后我们去办事器拿到相册列表,看代码。

/

代码实现了若何把对象数据衬着成选择器。

接下来我们便可以提交数据新建photo了,这还是一个表单事务formSubmit,固然为了体验在用户端其实不会感受到photo和photo_item新建之间的不同,只需点击一次按钮。

是以在提交表单时辰我们需要对是不是选择了相册和是不是传图进行判定。

/

关在photo记实的成立其实不复杂,我们之前学过新建相册,思绪都一样,POST /xcx/photos 便可,要说的是上传图片,我们看下面的代码

/

在上面的代码中触及到一个轮回,由于我可能一次选择多个图片然后点击提交,所以焦点是这个uploadImage函数,我们来看一看它。

/

这触及到wx.uploadFile函数,这是微信小法式内置的,用来上传一个文件,有几个点要说下

绿色框 要上传文件资本的路径,也就是我们相册yabo里选择的图片路径。

蓝色框 文件对应的 key,在yii2上经由过程这个名字取得文件对象。

红色框 有时辰上传文件的时辰还需要一些其他数据,可以都放到formData内。

如许就完成了上传图片功能。

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 yaboapp开发 原创
转载请保留链接: http://www.

关于我们      深圳yabo定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、yaboapp开发、微信公众号开发、深圳yabo小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机yaboapp开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数