百度小程序如何完成图片上传功能的开发

本文尝试往相册内传图功能，这需要小程序和服务器端的双重支持。

工具/原料

百度小程序开发工具

搭建好的服务器一台

服务器端

1、我们酋篚靶高需要数据库的支持，还记得第8篇说的那个photo数据表么，在这里我们进行一次修改然后再新增一个表。相册表存储每次照片的提交以及对本次提交的备注。

3、现在有了数据表我们再做两个控制器，分别用来服务于photo和photo_item表。

5、当点击了“提交”按钮后，会新家一条photo记录然后返回给小程序，小程序开始实际的传图过程并携带新photo记录的id来填充photo_item表。这里有一点要注意的，就是针对于photo记录的新建直接使用yii2的restful --- create 就可以了，但是对于传图不一样，涉及到接收图片、存储等等等等。因此我们对PhotoItemController的create方法进行了重写，如下图，这里也为你展示了yii2中restful如何重写内置的action。

小程序端

1、在小程序端分两步1、请求服务器POST /xcx/photos 新建一条photo氇监煜紊记录（所属相册、缛傍晷情描述）2、新建photo记录成功，携带文件请求POST /xcx/photo-items 新建一条photo_item记录（所属相册ID、photoID、图片路径、类型等）正式开始新建一条photo记录这个过程涉及到了一个小程序组件 -- picker，也就是滚动选择器，它能接收一个数组或对象数组，我们这里使用它来选择所属相册。当页面准备好后我们去服务器拿到相册列表，看代码。

3、关于photo记录的建立并不复杂，我们之前学过新建相册，思路都一样，POST /xcx/photos 即可，要说的是上传图片，我们看下面的代码

5、这样就完成了上传图片功能。