源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

图片上传之FileAPI与NodeJs

  • 时间:2020-05-11 16:23 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:图片上传之FileAPI与NodeJs
[b]HTML5之fileAPI[/b] HTML5之fileAPI使得我们处理图片上传更加简单。 [b]实例[/b] 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>
效果: [img]http://files.jb51.net/file_images/article/201701/2017012414105480.png[/img] 这里我们可以通过$("#modal_inputFile")[0].files[0]来获取到图片的信息。 [img]http://files.jb51.net/file_images/article/201701/2017012414105481.png[/img] 这里有name,size,type这几个我们常用的属性。 [b]实现预览[/b] 选择好图片后,我们都希望会有个预览功能。这个html5也为我们想到了。 他提供了FileReader这个新的对象给我们。 [url=https://developer.mozilla.org/en-US/docs/Web/API/FileReader]FileReader[/url]该接口主要用来把文件读入内存,并且读取文件中的数据。 这样我们就可以通过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]http://files.jb51.net/file_images/article/201701/2017012414105482.png[/img] 我们再来查看下img的src。
<img src="data:image/png;base64,iVBORXXXXXXXXXXXXX....XXXXXXX" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">
src是base64编码。 [b]与后台对接[/b] 既然前端使用文件API能满足我们的需求,那我们接下来就需要上传到服务端了。当仁不让的就是NodeJs了。 [b]前端请求[/b] 下面是前端发起请求的例子:
//图片上传
$('#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('上传失败');
 })
})
这里通过[url=https://developer.mozilla.org/en-US/docs/Web/API/FormData]FormData[/url]来处理我们需要上传的数据。 这里的data数据是一个序列过的对象。后台接受就行了。 [b]后端处理[/b] 服务端我们使用[url=https://github.com/felixge/node-formidable]node-formidable[/url]来处理图片的保存等操作。 见代码:
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是存在于内存中的数据,并不是真正的图片。 类似这样 [img]http://files.jb51.net/file_images/article/201701/2017012414105483.png[/img] 我们需要通过fs的方法,将文件重新保存到我们需要的地方即可。这时候就是图片了。 [b]最后[/b] 这里的form.parse(req, function(err, fields, files)中的fields与files到底是什么对象,一定要自己调试着看。看完你就明白是什么了。 之前我不清楚的时候就是打开浏览器就搜索,结果可想而知很惨,几乎全是错的。 所以不清楚的话一定要去查github。 还有app.use(bodyParser.urlencoded({ extended: true }));的作用是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息: Content-Type: application/x-www-form-urlencoded app.use(bodyParser.json())是用来解析json的。 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部