一步一步搭建一个图片上传网站（后台服务器用nodejs）

前几天看了腾讯云社区的一个文件上传的文┞仿 <文件上传那些事儿> ，大年夜体上讲了以下h5中图片上传的几个核心道理，然则没有后端接收的办事器代码，没法做测试。也没有具体的一个实例都是一些根本的道理片段，并且ui界面也欠好看，我就预备给那篇文┞仿作为弥补做一个图片上传网站。

效不雅如图：

一步一步搭建一个图片上传网站（后台办事器用nodejs）

点击上传后，会把文件放到后台一个uploads文件夹下面，如不雅上传成功，那么页面会弹出一个上传成功的提示框，如不雅上传掉败，会弹出一个掉败的提示框，如不雅网速比较慢，会显示出上传过程中的进度条。

开辟预备

用通俗的表单提交办法实现文件上传。

1.编写前端代码

如不雅办事器返回的是success，就弹出上传图片成功。不然弹出上传图片掉败。

<form action="uploadimg" method="POST" enctype="multipart/form-data"> 
        <input type="file" name="imgfile" multiple> 
        <input type="submit" value=http://developer.51cto.com/art/201705/"提交"> 
    </form>

设置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 }]) 	
			 1/5    1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　在R中使用开源大规模预测工具Prophet
            
            Prophet 是 Facebook 推出的开源大年夜范围猜测对象，可以在 R 和 Python 中应用以猜测时光序列数据。一、基本介绍下面实例中应用的是佩顿 &middot; 曼宁的维诽谤科主页每日拜访量的时光序>>>详细阅读


本文标题：一步一步搭建一个图片上传网站（后台服务器用nodejs）
地址：http://www.17bianji.com/lsqh/35075.html
 1/2    1