专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

投稿功能怎么做?多图片与多视频上传的要点

ins518 2024-11-25 13:14:28 技术文章 19 ℃ 0 评论

近日,一个客户的业务由于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页面,并进行渲染。当用户投稿完成时,给用户一个完成提示。

总结:

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

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

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表