近日，一个客户的业务由于wx.chooseImages接口老是出现故障，微信公众号授权功能总是不甚通畅，因此颇为影响使用。

业务需求：

原有的投稿功能，需要进行修复。同时，还要修复上传图片、视频等。

关键因素：

由于历史原因，原有系统一直在运行，无法直接放弃，只能在现有基础上进行修复。原系统是传统混编代码，不仅代码量非常大，而且存在部分公共组件的引用资源缺失的问题。其中，wx.chooseImages接口总是出现故障，或安卓可用或苹果可用，或均不可用。

解决思路：

为了解决客户的需求，同时考虑了多个解决方案，但最终决定使用OneAdmin开发框架进行改造，与原有系统共用相应的数据表，从而实现预设功能。同时，重新构建前端，放弃微信公众号授权应用功能的wx.chooseImages接口，直使用网页直接上传。其中，还要实现表单信息验证、收集和存储，以及多图片上传、多视频上传等功能。

操作步骤：

第一：

制作一个投稿表单的前端界面，其中包括：姓名、工作单位、手机号码、稿件标题、稿件内容，以及图片上传按钮和图片预览空口、视频上传按钮和视频预览窗口。

第二：

创建一个index控制器，并创建一个投稿方法，如add。

首先，通过查询分类数据库，将分类分类出来，并渲染到页面中，生成select的option。

其次，界面表单设置好相应的name和value。

最后，后端对request进行判断，收集表单传递过来的数组。对post数组进行验证、过滤和整理（前后端都需要验证，以确保安全！）

第三：

图片和视频上传较为复杂。其中，多图片和视频上传分别都是一个隐藏域，并且最终将是一个数组形式。

文章缩略图和视频，需要自动调用第一张和第一个视频作为封面，而其他的图片和视频可以存到别一个数据表中，以相册的方式进行展现。

此时，前端较为复杂，需要创建一个JS的多图片上传方法，同时创建一个多图片删除的方法；视频也一样需要创建一个uploadVideo，但视频的删除功能和图片的一样。

后端则需要同步创建uploadImg、uploadvideo、deImg、delMedia等方法。

uploadImg和uploadVideo可以共用一个，笔者为了区分，所以拆开了。

delImg主要就是为系统自动删除一个刚刚上传的文件。

delMedia方法主要是删掉media数据库中存储的picUrl信息。

另外，前端还需要引入jquery组件才能生效。

此时，用户在前端上传的图片、视频会即时上传到服务器上，并生成一个文件路径。

当用户执行提交操作时，数据库就会存储该数据，达成预设目的。

最后的最后，还要创建一个done页面，并进行渲染。当用户投稿完成时，给用户一个完成提示。

总结：

这个修复项目，并非一个真正意义上的项目。但其中的工作亮点很多，十分有价值的在于——如何对文章和媒体信息进行存储？如何实现多文件上传？

最后，不知道大家是否需要类似的投稿功能？请积极回复哦，如有需要，我们将在小程序中增加哦~