网站首页 > 技术文章 正文
近日,一个客户的业务由于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页面,并进行渲染。当用户投稿完成时,给用户一个完成提示。
总结:
这个修复项目,并非一个真正意义上的项目。但其中的工作亮点很多,十分有价值的在于——如何对文章和媒体信息进行存储?如何实现多文件上传?
最后,不知道大家是否需要类似的投稿功能?请积极回复哦,如有需要,我们将在小程序中增加哦~
- 上一篇: 前端文件上传组件流程的封装
- 下一篇: 前端使用openCV之图片处理
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 592℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 565℃【数据统计分析】详解Oracle分组函数之CUBE
- 551℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)