图片上传之FileAPI与NodeJs

HTML5之fileAPI

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

实例

超文本标记语言代码

div class='form-group '标签为=' modal _ inputFile ' class=' col-MD-3控件-标签标签-字体'位置图：/标签div class='col-md-9 '输入类型=' text ' readonly=' class=' form-control '占位符='点击选择文件输入类型=' file ' id=' modal _ inputFile ' img src=' http : ' class=' img-responsive ' id=' modal-pre ' alt='预览区style='最大高度： 300 px '/div/div效果：

这里我们可以通过$("# modal _ inputFile")[0].文件[0]来获取到图片的信息。

这里有名称、尺寸、类型这几个我们常用的属性。

实现预览

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

他提供了文件阅读器这个新的对象给我们。

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

这样我们就可以通过日期全球资源定位器(Uniform Resource Locator)来实现预览了。

var文件=文档。getelementbyid(modal _ inputFile ' ').文件[0];if(！file){ return false；} var reader=new FileReader()；reader.readAsDataURL(文件);读者。onload=function(e){ var IB _ pre=document。getelementbyid(' modal-pre ')；IB _ pre。src=这个。结果；}这样就实现了预览。

我们再来查看下img的src。

img src=' http : data : image/png；base64，iVBORXXXXXXXXXXXXX.XXXXXXX ' class=' img-responsive ' id=' model-pre ' alt='预览区style='最大高度： 300 px ' src是base64编码。

与后台对接

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

前端请求

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

//图片上传$('#preUpload ').打开('点击')，函数(e){ var data=new FormData()；var _ files=$(' # modal _ inputFile ')[0].文件[0];var ect=($(' # modal _ inputFile ')[0]).文件[0]).name.split(' . ')[1];if(ect！=='png'){ alert('请上传巴布亚新几内亚图片!')返回；} data.append('modal_file '，_ files)；$.ajax({ type: 'post '，dataType: 'json '，URL :窗口。stnt _ hosts ' thirdadamanage/upload/modal '，data: data，contentType: false，processData: false }).完成（功能（数据，状态){ console.log('上传成功');}).fail(function(err) { console.log('上传失败');})})这里通过表单数据来处理我们需要上传的数据。

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

后端处理

服务端我们使用令人敬畏的节点来处理图片的保存等操作。

见代码：

定义变量令人生畏=require('令人生畏');定义变量形式=新的强大IncomingForm()；//临时目录form.uploadDir=' ./upload/'；//预览图片上传router.post('/upload/modal '，function(req，res，next) { form.parse(req，function(err，fields，files){ if(files。modal _ file。path，files.modal_file.name，' preview ')RES . send({ stats : ' success '，data :[]})})))；函数重命名（旧，_新，代码，bId) { var path=' ./upload/" code "/；fs.exists(路径，函数(存在){ if(！存在){ fs.mkdir(路径)console.log('创建文件夹！)} fs.renameSync(旧，path _new，函数(错误){如果(错误){控制台。日志(err)；返回；} console.log('上传成功！') }) })}这里使用fs.renameSync的原因是，我们里面设置的临时目录form.uploadDir是存在于内存中的数据，并不是真正的图片。

类似这样

我们需要通过满量程的方法，将文件重新保存到我们需要的地方即可。这时候就是图片了。

最后

这里的form.parse(请求，函数（错误，字段，文件)中的田地（复数);场；域；字段与文件到底是什么对象，一定要自己调试着看。看完你就明白是什么了。

之前我不清楚的时候就是打开浏览器就搜索，结果可想而知很惨，几乎全是错的。

所以不清楚的话一定要去查github。

还有app . use(body parser . URL encoded({ extended : true })；的功能是解析我们常用的表单表单提交的数据，也就是说，请求头包含这样的信息：内容类型： application/x-www-form-URL encoded

app.use(bodyParser.json())用于解析json。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！