图片上传之FileAPI与NodeJs

2019-11-19 17:47:31

字体：大中小

来源：转载

供稿：网友

HTML5之fileAPI

HTML5之fileAPI使得我们处理图片上传更加简单。

实例

html代码

<div class="form-group">  <label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label>  <div class="col-md-9">   <input type="text" readonly="" class="form-control" placeholder="点击选择文件">   <input type="file" id="modal_inputFile">   <img src="" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">  </div></div>

效果:

这里我们可以通过$("#modal_inputFile")[0].files[0]来获取到图片的信息。

这里有name,size,type这几个我们常用的属性。

实现预览

选择好图片后，我们都希望会有个预览功能。这个html5也为我们想到了。

他提供了FileReader这个新的对象给我们。

FileReader该接口主要用来把文件读入内存，并且读取文件中的数据。

这样我们就可以通过date url来实现预览了。

var file = document.getElementById(modal_inputFile'').files[0]; if (!file) { return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { var ib_pre = document.getElementById('modal-pre'); ib_pre.src = this.result;}

这样就实现了预览。

我们再来查看下img的src。

<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">

src是base64编码。

与后台对接

既然前端使用文件API能满足我们的需求，那我们接下来就需要上传到服务端了。当仁不让的就是NodeJs了。

前端请求

下面是前端发起请求的例子：

//图片上传$('#preUpload').on('click', function(e) { var data = new FormData(); var _files = $("#modal_inputFile")[0].files[0]; var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1]; if(ect !== 'png'){  alert('请上传png图片!')  return; } data.append("modal_file", _files); $.ajax({  type: 'post',  dataType: 'json',  url: window.stnt_hosts + 'thirdAdmanage/upload/modal',  data: data,  contentType: false,  processData: false }).done(function(data, status) {  console.log('上传成功'); }).fail(function(err) {  console.log('上传失败'); })})

这里通过FormData来处理我们需要上传的数据。

这里的data数据是一个序列过的对象。后台接受就行了。

后端处理

服务端我们使用node-formidable来处理图片的保存等操作。

见代码:

var formidable = require("formidable");var form = new formidable.IncomingForm();//临时目录form.uploadDir = './upload/';//预览图片上传router.post('/upload/modal', function(req, res, next) { form.parse(req, function(err, fields, files) {  if (files.modal_file) {   rename(files.modal_file.path, files.modal_file.name, 'preview')   res.send({    stats:'success',    data:[]   })  } })});function rename(old, _new, code, bId) { var path = './upload/' + code + '/';  fs.exists(path, function(exists) {   if (!exists) {    fs.mkdir(path)    console.log('创建文件夹！')   }   fs.renameSync(old, path + _new, function(err) {    if (err) {     console.log(err);     return;    }    console.log('上传成功!')   })  })}

这里使用fs.renameSync的原因是，我们里面设置的临时目录form.uploadDir是存在于内存中的数据，并不是真正的图片。

类似这样