摘要:由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的,后端是接口的方式,只能选择这种方式,而且也方便可以存各种格式。下安装官网大家可以点进去,然后里面有介绍安装方法如何使用。
由于公司项目需要,图片与文件需要存到数据库而存本地,前端用的react,后端 是接口的方式,只能选择base64这种方式,而且也方便可以存各种格式。
1.React下react-pdf-js安装
官网
大家可以点进去,然后里面有介绍安装方法如何使用。
2.然后页面显示如下:
引入 import PDF from "react-pdf-js"; export default class Document extends Component{ construtor(){ super(); this.state = {} } onDocumentComplete = (pages) => { console.log(pages); //总页 this.setState({ page: 1, pages }); } handlePrevious = () => { this.setState({ page: this.state.page - 1 }); } handleNext = () => { this.setState({ page: this.state.page + 1 }); } render(){ //翻页 const pagination = (previous,next) =>{ let previousButton = ; if(previous === 1){ previousButton = ; } let nextButton = ; if(previous === next){ nextButton = ; } return {previousButton}{nextButton} 第{previous}页 共{next}页; } return() } } 然后分页有部分我没有按他官网的来我是自己写的,因为我觉得官网的写得太多了,大家可以参考一下
3.React 采用base64显示图片
由于我是做PHP的,后台接口与前端都是自己写的,这里只介绍php的方法。我也看过网上的一些方法,我不知道为什么那些人会写得那么麻烦,一条语句的问题,写了一大片,而且还有问题。代码如下:
后台代码:
$fileHandle = fopen($thumbImageFile,"r"); //打开文件 $file_datas = fread($fileHandle, filesize($thumbImageFile));//读取文件 $thumbnail = chunk_split(base64_encode($file_datas));转会为base64将图片
直接使用chunk_split(base64_encode(读取的图片));直接就可以化为base64然后存到数据库,即可
React显示:
//imageSrc 是从数据库中取出来的图片字段取到的数据
如果要显示pdf直接application/pdf;basa64,...
不过个人不建议pdf使用这种方式,因为pdf转成这种格式后,会比你上传的文件大8倍。也就是你传1M,数据库存的是8M,你要是上传100M,200M这样子的就有点儿恐怖了,对性能方面不利,图片的话大小没有改变.对于PDF可以使用其它方式,可以多带带写一个接口什么的直接输出也很简单,方法如下:
header("Content-type: " . $type . ";charset=utf-8"); header("Access-Control-Allow-Headers:Origin,No-Cache,X-Requested-With,If-Modified-Since,Pragma,Last-Modified, Cache-Control,Expires,Content-Type,X-E4M-With,Authorization"); header("Access-Control-Allow-Origin:*"); echo $data; unset($rs);
传入ID查询出来数据,然后以上面的方式显示即可,$type是类型如application/pdf,$data是数据,其它的是加的跨域的。
然后直接把这个链接直接放到pdf file后面即可,也很方便。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/29658.html
摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...
摘要:项目需求在或浏览器下,调用电脑摄像头确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机,进行人脸图像采集预览,并将图片的码传入到后台进行后续操作。该适用于和以上,以下版本的未测试。前期插件准备版本以上即可地址作者主页地址这里。 项目需求:在ie或chrome浏览器下,调用电脑摄像头(确保使用的是笔记本电脑,或者摄像头功能正常使用的台式机),进行人脸图像采集预览,并将图片的base6...
摘要:移动端文档富文本编辑器,支持图文混排引用大标题无序列表,字体颜色加粗斜体。可用于独立项目开发,也可以用于与原生混合开发。,图片文件最大尺寸限制,单位,默认,编辑器左右内边距,默认像素,是否显示底部工具栏图片标签连接添加等图标。 ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排、引用、大标题、无序列表,字体颜色、加粗、斜体。 可用于独立web项目开发,也可以用于与原生A...
阅读 3178·2023-04-26 02:27
阅读 2023·2021-11-22 14:44
阅读 3892·2021-10-22 09:54
阅读 3034·2021-10-14 09:43
阅读 628·2021-09-23 11:53
阅读 12225·2021-09-22 15:33
阅读 2574·2019-08-30 15:54
阅读 2536·2019-08-30 14:04