Angular2 + NodeJs 上传图片到服务器

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_33594380/article/details/83177591

一个小小的功能,花了接近一天的时间才搞定。网上虽然有很多关于Angular2 上传图片的博客,但基本对我都帮助不大。大多数博客的问题在于,他们只是贴了大段的代码,完全没有强逻辑性的文字描述,大大提高了别人从博客中学习的成本。可能甚至连他们自己都不清楚这个功能是怎么实现的,为什么这样写就能实现了。所以我每次写博客的时候都会先给出一个解决问题的步骤,然后再按步骤进行解决,并贴出相应的代码。这样写的好处是将问题拆分成一个个小问题进行解决,即使别人在参考你的博客的过程中遇到了问题,也可以针对出问题的小点进行其他的搜索,而不必否定整篇博客,重新去看其他的博客。闲话说到这里,回归正题。

虽然接触前端挺久的了,但是图片上传对我来说一直是一个黑盒似的操作。之前也基本是用表单进行提交,中间具体转换成什么,怎么传输到服务器一概不知。如果不用表单,也不知道该怎么实现图片上传,当然不算微信这种提供了相应的api 的“框架”。直到这两天研究angular + nodejs 上传图片的时候才想到一个问题:图片是可以转换成base64 编码的,而base64 编码就是一个字符串,如此一来,那图片上传跟普通的ajax 请求不就没什么区别了吗?

问题已经很清楚了,我们只要在前端构造一个对象,对象中存放个图片的名字类型等信息外加base64 编码,然后把这个对象通过ajax 请求发送给服务器端即可,服务器端接收到请求以后,拿出图片的base64 编码,还原为图片,存储到服务器端的某一个路径下,然后把该路径返回给前端,即可完成图片从浏览器端到服务器端的传输操作。接下来,就是实操环节了。

1. 前端

首先,我们需要通过给html 的input 标签绑定一个事件来获取用户选定的图片的相关信息,html 代码如下:

<input name="img" type="file" id="img-input" (change)="uploadImg($event)"/>

在js 的事件函数中取出图片的信息,放到我们构造的对象中,并将图片转换为base64 编码,然后把相应的编码同样放入该对象中,图片转换为base64 编码的代码也已经放在下面:

uploadImg(event) {
  const imgFile: File = event.target.files[0];
  // post data
  const postData = {
    name: imgFile.name,
    size: imgFile.size,
    type: imgFile.type,
    base64: ''
  };
  const a = new FileReader();
  a.onload = (e) => {
    // 获取base64
    postData.base64 = e.target.result;
    // 上传图片
    this.postService.uploadImg(postData)
      .subscribe(res => {
        if (res.code === 0) {
          // success code
        } else {
          // err code
        }
      });
  };
  a.readAsDataURL(imgFile);
}

2. 后端

后端使用nodejs 中的express 框架来处理请求,基本的配置及路由代码我就不写了(没有写好的可以去这里看:https://blog.csdn.net/u010730897/article/details/66970344?locationNum=5&fps=1),这里放的是处理前端请求的对应的方法:

async uploadImg(req, res, next) {
  // 获得图片base64
  const imgData = req.body.base64;
  const base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  const dataBuffer = new Buffer(base64Data, 'base64');
  // 设置图像名
  const imgName = req.body.name.split('.')[0] + '_' + Date.parse(new Date()) 
      + '.' + req.body.name.split('.')[1];

  let result = {
    code: 0,
    msg: 'ok',
    data: {}
  }

  // 保存图片
  fs.writeFile('upload_img/' + imgName, dataBuffer, function(err) {
    if(err){
      result.code = -1;
      result.msg = 'error';
    }else{
      result.code = 0;
      // 返回图片位置
      result.data.url = 'http://localhost/angularBlogBk/upload_img/' + imgName;
    }
    res.send(JSON.stringify(result));
  });
}

 

展开阅读全文

nodejs上传图片,求指点

05-30

//创建http服务器rnvar server = http.createServer(function (req, res) rn//设置跨域rn res.writeHead(200,"Content-Type":"application/json;charset=utf-8","Access-Control-Allow-Origin":"*","Access-Control-Allow-Headers":"X-Requested-With","Access-Control-Allow-Methods":"PUT,POST,GET,DELETE,OPTIONS");rnrn//接收到上传的文件,data是个bufferrnreq.on("data",function (data) rn var datastr=data.toString();//输出格式如附件:[img=https://img-bbs.csdn.net/upload/201805/30/1527663065_684687.png][/img]rn rn //用正则表达式查看data的类型是否图片类型rn var pattern=/filename=\".\.jpg\"|filename=\".\.jpeg\"|filename=\".\.png\"|filename=\".\.gif\"/i;rnrn if(!pattern.test(datastr))//匹配不到图片格式提示选择图片上传rn rn res.write([result:"请选择图片上传"]);rn rn elsern rn var patternstr=pattern.exec(datastr)[0];//匹配到filename="1.jpg"rnrn var file_ext=(/jpg|jpeg|png|gif/i).exec(patternstr)[0];//从filename="1.jpg"中找出扩展名jpgrn rn var curr_date=new Date();rn//拼写上传成功后生成的图片文件名rn var serv_file=curr_date.getFullYear().toString()+curr_date.getMonth().toString()+curr_date.getDate().toString()rn +curr_date.getHours().toString()+curr_date.getMinutes().toString()+ curr_date.getSeconds().toString()rn +curr_date.getMilliseconds().toString()+parseInt(Math.random()*10)+"."+file_ext;rn//将buffer写入到图片文件中,上传成功rn fs.writeFile(__dirname+"/"+serv_file,data,flag:'a',function (err) rn if(err)rn rn console.log("图片上传失败"+err.toString());rn rn else rn console.log("上传成功");**//生成了图片,但打开图片提示格式不正确。**rn rn )rn rn )rn) 论坛

上传图片服务器

11-19

rnrnrnrn1、源程序建立 rnrn  1) 首先在数据库中建立如下结构的表blobsave: rnrn  字段名称 数据类型 备注 rn  Id char(4) primairy key index rnrn  s_path char(50) rnrn  pic binary (50) rnrn  2) 在PB建立PBl库blobsave.PBl rnrn  3) 在PBl库blobsave.PBl中建立应用blobsave rnrn  在应用的open事件中设置数据库连接程序(本程序中采用的是odbc方式连接数据库,读者可根据自己所建立的数据库的不同选用不同的连接方式,以下连接数据库的代码也有所改动,至于连接不同的数据库的方法,请参考有关资料,本文不做详细介绍): rnrn rnrn  SQLCA.DBMS = "ODBC" rnrn  SQLCA.AutoCommit = False rnrn  SQLCA.DBParm = "Connectstring='DSN=blob'" rnrn  connect; rnrn  open(w_main) rnrn  其中命令按钮cb_path的clicked中的代码格式如下:open(w_path) rnrn  其中命令按钮cb_dbblob的clicked中的代码格式如下:open(w_dbblob) rnrn  其中命令按钮cb_OLEblob的clicked中的代码格式如下:open(w_OLEblob) rnrn  4) 建立数据窗口dw_blobsave rnrn  按照上文中建立数据窗口的blob列的方法建立数据窗口dw_blobsave如图所示: rnrn  其中:add,del,save,cancel,,retrieve等分别为数据窗口dw_blobsave的append row,delete row,update,retrieve动作按钮。 rnrnrn 在数据窗口中添加blob列的的步骤 rnrn  1) 选择具有二进制字段的数据表作为数据源建立一新的数据窗口(该窗口可以至少需要包含非数据库表的标识列) rnrn  2) 选择insert -control-OLE database blob 菜单,在数据窗口的detail节中要插入blob列的位置单击鼠标,这时将显示如图1所示的对话框 rnrn  下面解释这些属性的具体含义 rnrn  1) client class: 客户类名,默认为datawindow rnrn  2) client name:客户名,默认为untitled rnrn  3) table: 选择含有blob列的数据库表,所选表的字段将出现在右侧的large binary/text column列表框中。 rnrn  4) large binary/text column:选择一个blob类型的字段列 rnrn  5) key clause:检索和更新blob数据的关键字表达式其中使用带冒号前缀的变量指出是数据窗口对象的列,如 表达式 id=:id,id是数据库表中的列,变量指出数据窗口对象的列 rnrn  6) filetemplate :如果需要OLE应用服务器每次打开相同的文件,则在filetemplate框中输入文件名。 rnrn  7) OLE class :如果不需要OLE应用服务器每次打开相同的文件,则在OLE class框中选择一个OLE类,如Pbrush。 rnrn  8) Client name expression:显示在OLE服务器应用程序窗口标题的文字,可以输入为:"对应记录的id号是"+id rnrn单击ok按钮关闭对话框,将dbole列添加到适当的位置,保存数据窗口。预览则可以对数据库中的blob数据进行存取,但是在新建的记录中只能存取OLE class框中选择的一种格式的blob数据,不能存储多种格式的数据;但如果数据库中存有多种格式的数据,可以预览各种格式的数据。 rnrn  首先创建实例变量 OLEstorage stor1 rnrn     2 建立窗口w_OLEblob rnrn     在窗口w_OLEblob的open事件中写入以下代码: rnrn  stor1 = create olestorage rnrn  stor1.open("c:\p1.ole") //打开或创建ole文件 rnrn    在窗口w_OLEblob的close事件中写入以下代码: rnrn  destroy stor1 rnrn    改变数据窗口dw_1的rowfocuschanged中的代码如下: rnrn  blob text1 rnrn  long row_num rnrn  row_num=dw_1.getrow() rnrn  if row_num>0 then rnrn  string id rnrn  id = dw_1.object.id[row_num] rnrn  ole_1.open(stor1,"w"+id) rnrn  end if rnrn     改变数据窗口dw_1的buttonclicked中的代码如下: rnrn  long row_num rnrn  if dwo.name="cbselect" then rnrn  row_num=dw_1.getrow() rnrnstring filepath,filename rnrn  getfileopenname("请选择备注文件",filepath,filename) rnrn  dw_1.object.s_path[row_num]=filepath rnrn  ole_1.insertfile(filepath) rnrn  end if rnrn  if dwo.name="cbsave" then rnrn  string id rnrn  row_num=dw_1.getrow() rnrn  id=dw_1.object.id[row_num] rnrn  ole_1.saveas(stor1,"w"+id) rnrn  stor1.save() rnrn  end if rnrn     保存窗口w_OLEblob,运行应用程序即可。rn 论坛

没有更多推荐了,返回首页