上传图片文件到服务器
前言：
在 Web 应用中，上传图片功能很常见，今天就给大家分享两种上传图片到服务器的方法，包含前后端代码(后台用 Node)。
本文使用的环境为：
- express 版本为 4.17.1
- fs 版本为 7.0.1
- path 版本为 0.1.7
- multer 版本为 1.4.1
- uuid 版本为 3.3.2
- formidable 版本为 1.2.1
一、使用 form 表单
1. 前端代码
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传：</h3>
选择一个文件上传: <br />
<form action="/file_upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" size="50" />
<br />
<button type="submit">上传</button>
</form>
</body>
</html>
注意点：
- 请求方式为 post
- 需要设置 form 表单的 enctype 属性为 “multipart/form-data”
2. 后端代码
var express = require('express');
var app = express();
var fs = require("fs");
var multer = require('multer');
app.use('/public',express.static('public'));
app.use(multer({ dest: '/tmp/'}).array('image'));
app.post('/file_upload',function (req, res) {
fs.readFile( req.files[0].path, function (err, data) {
var des_file = __dirname + "/public/img/" + req.files[0].originalname;
fs.writeFile(des_file, data, function (err) {
if(err){
console.log( err );
}else{
var response = {
message:'文件上传成功',
filename:req.files[0].originalname
};
}
res.send( JSON.stringify( response ) );
});
});
})
var server = app.listen(8081, function () {
var host = server.address().address;
var port = server.address().port;
console.log("应用实例，访问地址为 http://", host, port)
})
注意点：
- 除了常规的 express 模块和 fs 模块，还需要用到 multer 模块
二、使用 input 监听 change 事件
1. 前端代码
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>文件上传表单</title>
</head>
<body>
<h3>文件上传：</h3>
选择一个文件上传: <br />
<input id="file" type="file" name="image" size="50" />
<!--<img src="" alt="" id="img">-->
</body>
<script src="jquery.min.js"></script>
<script> $('#file').change(function(){ var input = $('#file')[0]; //图片上传成功后会将图片名称赋值给 value 属性 if(input.value){ //使用 FormData 对象 var formData = new FormData(); //将图片对象添加到 files formData.append('files', $('#file')[0].files[0]) //使用 ajax 上传图片 $.ajax({ url: 'http://localhost:8081/file_upload', type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(res) { console.log(res); }).fail(function(res) { console.log(res); }); //以下是将图片显示到 img 标签上 // var pic = input.files[0]; // var read = new FileReader(); // read.onload = function (e) { // document.getElementById('img').src = e.target.result; // }; // read.readAsDataURL(pic); } }) </script>
</html>
注意点：
- 需要使用 FormData 对象
- processData 和 contentType 均为 false
2. 后端代码
var express = require('express');
var app = express();
var fs = require("fs");
var path = require('path');
var uuid = require('uuid');
var formidable = require('formidable');
app.use('/public',express.static('public'));
app.post('/file_upload',function (req, res) {
//创建表单
var form = new formidable.IncomingForm();
//设置编码格式
form.encoding = 'utf-8';
//设置文件存储路径
form.uploadDir = "public/img";
//保留后缀
form.keepExtensions = true;
//设置单文件大小限制 2m
form.maxFieldsSize = 2 * 1024 * 1024;
//form.maxFields = 1000; 设置所以文件的大小总和
form.parse(req, function (err, fields, files) {
var file = files.files;
let picName = uuid.v1() + path.extname(file.name);
fs.rename(file.path, 'public\\img\\' + picName, function (err) {
if (err) return res.send({ "error": 403, "message": "图片保存异常！" });
res.send({ "picAddr": picName });
});
});
})
var server = app.listen(8081, function () {
var host = server.address().address;
var port = server.address().port;
console.log("应用实例，访问地址为 http://", host, port)
})
注意点：
- 除了常规的 express 模块、fs 模块 和 path 模块，还需要用到 uuid 模块与 formidable 模块
