有时候我们不想使用form表单上传文件，而是想使用ajax，这里我们提倡用formdata的形式
但是也会遇到很多坑
首先说前台
<body>
<input type="file" id="files">
<button id="btn">上传</button>
</body>
内容部分就是这些，因为是用来测试的
$("#btn").click(function () {
var pic=$("#files")[0].files[0];
var formdata=new FormData();
console.log(pic);
formdata.append("thumbnail",pic);
console.log(formdata);
$.ajax({
url:"/upload",
type:"POST",
data:formdata,
processData:false,
contentType:false,
success:function (data) {
console.log("返回的数据: " + data );
}
})
});
这里有几个注意点
第一、如何获取type=file的值
var pic=$("#files")[0].files[0];
第二、ajax必须写上contentType:false,和processData：false
contentType为什么要设置为false，请看https://blog.csdn.net/death05/article/details/80065742
processData为什么为false
processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
现在来说说后台
var express = require('express');
var router = express.Router();
var fs = require('fs');
var path= require("path");
var formidable = require('formidable');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.post("/upload",function (req,res,next) {
console.log('开始文件上传....');
var form = new formidable.IncomingForm();
//设置编辑
form.encoding = 'utf-8';
//设置文件存储路径
form.uploadDir = "./public/images/";
//保留后缀
form.keepExtensions = true;
//设置单文件大小限制
form.maxFieldsSize = 2 * 1024 * 1024;
form.parse(req, function(err, fields, files) {
console.log(files);
console.log(files.thumbnail.path);
console.log('文件名:'+files.thumbnail.name);
var t = (new Date()).getTime();
//生成随机数
var ran = parseInt(Math.random() * 8999 +10000);
//拿到扩展名
var extname = path.extname(files.thumbnail.name);
//path.normalize('./path//upload/data/../file/./123.jpg'); 规范格式文件名
var oldpath = path.normalize(files.thumbnail.path);
//新的路径
let newfilename=t+ran+extname;
var newpath = './public/images/'+newfilename;
console.warn('oldpath:'+oldpath+' newpath:'+newpath);
fs.rename(oldpath,newpath,function(err){
if(err){
console.error("改名失败"+err);
}
res.render('index', { title: '文件上传成功:', imginfo: newfilename });
});
//res.end(util.inspect({fields: fields, files: files}));
});
});
module.exports = router;
网友评论