js如何将base64格式图片保存到服务器??

js如何将base64格式图片保存到服务器??,第1张

下面一小段代码给大家分享Nodejs把接收base64格式保存为文件存储到服务器上的方法,具体代码如下所示:
apppost('/upload', function(req, res){
//接收前台POST过来的base64
var imgData = reqbodyimgData;
//过滤data:URL
var base64Data = imgDatareplace(/^data:image\/\w+;base64,/, "");
var dataBuffer = new Buffer(base64Data, 'base64');
fswriteFile("imagepng", dataBuffer, function(err) {
if(err){
ressend(err);
}else{
ressend("保存成功!");
}
});
});

一、先来熟悉一下将要使用的对象方法:

用来获取上一个页面传 递过来的数据一般是使用Request对象。同样的,我们也可以使用Request对象 来获取上传上来的文件数据,使用的方法是RequestBinaryRead()。

要从数据库中读出来的数据显示到网页上面要用到的方法是:RequestBinaryWrite()。

二、在得到了的数据,要保存到数据库中的时候, 不可以直接使用Insert语句对数据库进行 *** 作,而是要使用ADO的 AppendChunk方法。

同样的,读出数据库中的数据,要使用GetChunk方 法。

各个方法的具体语法如下: 

 RequestBinaryRead语法: 
variant = RequestBinaryRead(count) 
参数 
variant 
返回值保存着从客户端读取到数据。 
count 
指明要从客户端读取的数据量大小,这个值小于或者等于使用方法 
RequestTotalBytes得到的数据量。 
 RequestBinaryWrite语法: 
RequestBinaryWrite data 
参数 
data 
要写入到客户端浏览器中的数据包。 
 RequestTotalBytes语法: 
variant = RequestTotalBytes 
参数 
variant 
返回从客户端读取到数据量的字节数。 
 AppendChunk语法 
将数据追加到大型文本、二进制数据 Field 或 Parameter 对象。 
objectAppendChunk Data 
参数 
object Field 或 Parameter 对象 
Data 变体型,包含追加到对象中的数据。 
说明 
使用 Field 或 Parameter 对象的 AppendChunk 方法可将长二进制或字符数 
据填写到对象中。在系统内存有限的情况下,可以使用 AppendChunk 方法对长 
整型值进行部分而非全部的 *** 作。 
 GetChunk语法 
返回大型文本或二进制数据 Field 对象的全部或部分内容 。 
variable = fieldGetChunk( Size ) 
返回值 
返回变体型。 
参数 
Size 长整型表达式,等于所要检索的字节或字符数。 
说明 
使用 Field 对象的 GetChunk 方法检索其部分或全部长二进制或字符数据。 
在系统内存有限的情况下,可使用 GetChunk 方法处理部分而非全部的长整型 
值。 
GetChunk 调用返回的数据将赋给“变量”。如果 Size 大于剩余的数据,则 
GetChunk 仅返回剩余的数据而无需用空白填充“变量”。如果字段为空,则 
GetChunk 方法返回 Null。 
每个后续的 GetChunk 调用将检索从前一次 GetChunk 调用停止处开始的数 
据。但是,如果从一个字段检索数据然后在当前记录中设置或读取另一个字段 
的值,ADO 将认为已从第一个字段中检索出数据。如果在第一个字段上再次调 
用 GetChunk 方法,ADO 将把调用解释为新的 GetChunk  *** 作并从记录的起始 
处开始读取。如果其他 Recordset 对象不是首个 Recordset 对象的副本,则 
访问其中的字段不会破坏 GetChunk  *** 作。 
如果 Field 对象的 Attributes 属性中的 adFldLong 位设置为 True,则可 
以对该字段使用 GetChunk 方法。 
如果在 Field 对象上使用 Getchunk 方法时没有当前记录,将产生错误 3021 
(无当前记录)。 
三、设计数据库,作为测试的数据库结构如 下(Access97):

字段名称类型描述

id  自动编号 主键值

img OLE对象 用来保存数据  

对于在MS SQL Server7中,对应的结构如下:

字段名称类型描述

id int(Identity) 主键值 
img image   用来保存数据  
四、正式编写纯ASP代码上传部分了,首先,有一个提 供给用户的上传界面,可以让用户选择要上传的。代码如下 (uploadhtm): 
<html> 
<body> 
<center> 
<form name="mainForm" enctype="multipart/form-data" 
action="processasp" method=post> 
<input type=file name=mefile><br> 
<input type=submit name=ok value="OK"> 
</form> 
</center> 
</body> 
</html> 
注意代码中黑色斜体的部分,一定要在Form中有这个属性,否则,将无 
法得到上传上来的数据。 
五、接下来,要在processasp中对从浏览器中获取的数据进行必要的处 理,因为在processasp中获取到的数据不仅仅包含了想要的上传上来的的数据,也包含了其他的无用的信息,需要剔除冗余数据,并将处理过的数据保存到数据库中,这里以Access97为例。具体代 码如下(processasp): 
<% 
responsebuffer=true 
formsize=requesttotalbytes 
formdata=requestbinaryread(formsize) 
bncrlf=chrB(13) & chrB(10) 
divider=leftB(formdata,clng(instrb(formdata,bncrlf))-1) 
datastart=instrb(formdata,bncrlf & bncrlf)+4 
dataend=instrb(datastart+1,formdata,divider)-datastart 
mydata=midb(formdata,datastart,dataend) 
set connGraph=serverCreateObject("ADODBconnection") 
connGraphConnectionString="driver={Microsoft Access Driver (mdb)};DBQ=" & 
serverMapPath("imagesmdb") & ";uid=;PWD=;" 
connGraphOpen 
set rec=servercreateobject("ADODBrecordset") 
recOpen "SELECT  FROM [images] where id is null",connGraph,1,3 
recaddnew 
rec("img")appendchunk mydata 
recupdate 
recclose 
set rec=nothing 
set connGraph=nothing 
%> 
六、这样就把上传来的保存到了名为imagesmdb的数据库中 了,剩下的工作就是要将数据库中的数据显示到网页上面了。

一般在HT ML中,显示都是使用<IMG>标签,也就是<IMG SRC="路径">,但是是保存到了数据库中,“路径”是什么呢?呵呵,其实这个 SRC属性除了指定路径外,也可以这样使用哦: 
<IMG SRC="showimgaspid=xxx"> 
所以,要做的就是在showimgasp中从数据库中读出来符合条件的 数据,并返回到SRC属性中就可以了,具体代码如下(showimgasp): 
<% 
set connGraph=serverCreateObject("ADODBconnection") 
connGraphConnectionString="driver={Microsoft Access Driver (mdb)};DBQ=" & 
serverMapPath("imagesmdb") & ";uid=;PWD=;" 
connGraphOpen 
set rec=servercreateobject("ADODBrecordset") 
strsql="select img from images where id=" & trim(request("id")) 
recopen strsql,connGraph,1,1 
ResponseContentType = "image/" 
ResponseBinaryWrite rec("img")getChunk(7500000) 
recclose 
set rec=nothing 
set connGraph=nothing 
%> 
七、注意在输出到浏览器之前一定要指ResponseContentType = "image/", 以便正常显示。 最后要注意的地方是,我的processasp中作的处理没有考虑到第一页 (uploadhtm)中还有其他数据,比如<INPUT type=tesxt name=userid>等等,如果 有这些项目,processasp就要注意处理掉不必要的数据。 

大概流程:
1上传插件的选择:此篇博文选择的是jQuery的zyupload文件上传插件;
2上传请求发起后,java代码的处理:你是要将上传的只保存在服务器还是只保存在数据库还是说两者都采取。上传到服务器很简单,保存到数据库也很简单,但是此处需要考虑业务,保存在数据库时采用哪种保存方式(本博文业务来自于项目,因为数量巨多,故在数据库是通过保存的路径实现的,并非二进制流);
3保存在数据库后,在前段页面的回显功能。

wxgetFileSystemManager() 是获取文件管理器对象;

aawriteFile 是写文件,详细参数可 官方文档说明;

wxenvUSER_DATA_PATH+'/testpng' 这里是创建一个临时文件的文件名;

thatdatasceneslice(22) 这里是把 data:image/png;base64, 这一段去除,需要注意的是去除这一段之后 base64 编码之间放到image组件的src里面是不能显示的;

wxsaveImageToPhotosAlbum 是保存到相册。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13399202.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-29
下一篇 2023-07-29

发表评论

登录后才能评论

评论列表(0条)

保存