<kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

              <kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

                      <kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

                              <kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

                                      <kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

                                              <kbd id='CLPzTeSRBSjPt3z'></kbd><address id='CLPzTeSRBSjPt3z'><style id='CLPzTeSRBSjPt3z'></style></address><button id='CLPzTeSRBSjPt3z'></button>

                                                  公司介绍

                                                  欢迎访问太阳城娱乐官方网,亚洲最佳娱乐平台,太阳城娱乐城,官网直营大额无忧,太阳城客户端下载

                                                  设备租赁合同

                                                  太阳城娱乐官方网_一步一步搭建一个图片上传网站(靠山处事器用nodejs)

                                                  发布时间:2018/02/04 作者:太阳城娱乐官方网点击量:8147

                                                    创业项目优选 好项目来A5招商 ,点击入驻!

                                                  前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,概略上讲了以下h5中图片上传的几个焦点道理,可是没有后端接管的处事器代码,没法做测试。也没有详细的一个实例都是一些根基的道理片断,而且ui界面也欠悦目,我就筹备给那篇文章作为增补做一个图片上传网站。

                                                  结果如图:

                                                  一步一步搭建一个图片上传网站(靠山处事器用nodejs)

                                                  点击上传后,会把文件放到靠山一个uploads文件夹下面,假如上传乐成,那么页面会 弹出一个上传乐成的提醒框,假如上传失败,会弹出一个失败的提醒框,假如网速较量慢,会表现出上传进程中的进度条。

                                                  开拓筹备

                                                  用平凡的表单提交要领实现文件上传。

                                                  1.编写前端代码

                                                          "file" name="imgfile" multiple> 

                                                          "submit" value="提交"

                                                       

                                                  配置action为提交地点, enctype="multipart/form-data"

                                                  配置提交文件表单域名为 imgfile

                                                  2.编写后端测试用代码

                                                  这里我们回收了express框架,必要先安装这个框架,然后行使静态中间件指定安排我们js css html 文件的目次

                                                  var app = express(); 

                                                  app.use(express.static('dist')) 

                                                  下载处理赏罚上传文件的插件 multer

                                                  在readme.md文件中有根基的行使要领,我们复制过来代码实例轻微改改就可以行使了。把文件上传路径指定到uploads,然后用当前日期和文件名定名上传过来的文件。这个imgfile域名必需严酷和前端表单文件域名对应起来。

                                                  完备代码如下:

                                                  "use strict"

                                                  exports.__esModule = true

                                                  var express = require("express"); 

                                                  var multer = require("multer"); 

                                                  var storage = multer.diskStorage({ 

                                                      destination: function(req, file, cb) { 

                                                          cb(null'./uploads'); 

                                                      }, 

                                                      filename: function(req, file, cb) { 

                                                          cb(null, `${Date.now()}-${file.originalname}`) 

                                                      } 

                                                  }) 

                                                  var upload = multer({ storage: storage }); 

                                                  var app = express(); 

                                                  app.use(express.static('dist')); 

                                                  //var cpUpload = upload.fields([{ name'imgfile', maxCount: 12 }]) 

                                                  app.post('/uploadimg', upload.array('imgfile', 40), function(req, res, next) { 

                                                      var files = req.files 

                                                      console.log(files) 

                                                      if (!files[0]) { 

                                                          res.send('error'); 

                                                      } else { 

                                                          res.send('success'); 

                                                      }    

                                                      console.log(files); 

                                                  }) 

                                                   

                                                  var server = app.listen(9999, 'localhost'function() { 

                                                      console.log('server is running at port 9999...'); 

                                                  }); 

                                                  这样选择文件,点击提交按钮后文件就被上传到了处事器uploads文件夹下

                                                  用H5和ajax技能实现无革新文件上传

                                                  1.改革原本的选择文件按钮,让它酿成一个可爱的小图标,点击后选择文件。

                                                  这个过于简朴就不放代码了,详细思绪是把一个a标签放上配景图片,把上传文件 input type="file" 巨细配置成a标签一样大,而且安排到a标签上面,opacity配置成0透明的。点击a现实上是点击了 input type="file"