最近在工作中遇到了一个关于图片上传的问题，根据以前做项目的经验，知道这家公司上传图片的方式有两种。

之前的一个项目中用的是第一种方法，这次需要用第二种方法。同时还需要考虑后期在前端页面显示图片的问题。同事直接建议我使用从数据库存入图片直接显示的方法。一开始我还有些疑惑，后来在百度上搜了一下，发现还是挺好用的。

1. 保存图像

将文件通过流式传输的方式转换成字节数组（我在图中用的是公司框架里的转换方法）。

我自己的话如下

得到字节数组之后，调用.().([])方法将字节数组转化为data()类型，直接存入数据库。

2. 拍照

要检索图像，只需查询数据库并获取刚刚保存的数据。

在显示的时候，我先把找到的数据直接放进去

src，但是没起作用，一度怀疑需要解密，在百度上搜了一下，发现存储的图片确实可以直接在浏览器显示，但是需要加上data:/png;，前缀如下

我在这里使用 vue，所以它是： src

我从数据库中获取了它

搞定了，本周的工作圆满结束，周末愉快

又是一个周末，没想到还有更多

因为我的项目是小程序开发，我用的是uni-app来上传预览图片，上传的时候用的是uni.，然后直接把图片路径放到数组里，预览的时候用uni.。从数据库里获取的图片是加密的，我试过用uni.直接预览加密后的图片数据，但是不行，于是自己写了一个div，把图片放到div里，后来发现用uni直接就能预览加密后的图片数据。

previewImage:function(pic){ let arr =["data:image/png;base64,iVBORWOKGgoAAA"]; //"data:image/png;base64," + pic var that = this; uni.previewImage({ current:1, urls:arr, succss:function(data){ }, fail:function(err){ } }) }

本来我是直接用urls:"data:/png;,"+pic的，但是没想到把这个字符串放进数组里，没有仔细看开发文档。。。

为什么要用uni.呢？因为我写的图片预览在手机上不能放大，还得自己想办法放大，太麻烦了。

这里面还有一个大坑

在真机调试小程序时，uni.预览图片时，我点击图片，什么反应都没有。

控制台报告

微信小程序数据传输长度为1.5MB，存在性能问题

当时没注意这个警告，我也知道这个原因，是因为小程序跳转页面的时候带了参数，我传了需要的数据，但是后端没有拿到，数据里面有很多图片，导致数据量很大，我用uni.预览图片的时候，点击图片没有任何反应。

预览图片时，点击图片没有反应。这可能是由于传输的数据量太大。

后来我改成页面跳转时只传递一个ID，并从后台再次检查数据，数据传输量变小了，图片预览也如预期成功了。

又跳过了一个大坑，以后不管是小程序还是其他东西，跳转页面的时候尽量少调，或者直接用主键查就好了，虽然麻烦，但能少踩坑。

周末愉快！！！！