在开发项目过程中,少不了上传图片,可以通过form表单上传图片,前端代码:
<form enctype="multipart/form-data" id="form1" method="POST" action="/upload">
<input type="file" id="instructions" name="instructions" multiple="multiple">
<button type="submit">提交</button>
</form>
给表单设置**enctype=“multipart/form-data”**属性。
后端路由代码(post方式获取):
router.post("/",(req,res)=>{
const form = new multiparty.Form(); // 表单 name
form.encoding = "UTF-8"; // 设置编码
form.uploadDir = "./uploadtemp"; // 设置临时文件中转站
form.maxFilesSize = 2*1024*1024; // 2M // 设置上传图片的最大内存
form.parse(req,function(err, fields, files){
if(err) throw err; // fields 文件域对象 // files 图片文件
var uploadUrl = "/images/upload/";
console.log(files)
file = files['instructions']; // 图片信息
originalFilename = file[0].originalFilename, // 1.jpg
tempath = file[0].path; // 临时的文件路径
var timestamp = new Date().getTime();
uploadUrl += timestamp+originalFilename; // /images/upload/12342314214521.jpg
var newPath = "./public"+uploadUrl; // 最终的文件路径
var fileRead = fs.createReadStream(tempath); // 可读流 可写流
var fileWrite = fs.createWriteStream(newPath);
fileRead.pipe(fileWrite) // pipe 管道输送 数据
fileWrite.on("close",()=>{ // pipe 监听 关闭 删除临时文件夹里面的图片
fs.unlinkSync(tempath);
res.json({err:"",msg:uploadUrl}) // msg uploadUrl
})
})
})
以上就是表单上传图片操作。
cnpm i express-generator -g 全局安装express框架
express -e 文件夹名称 新建一个新的express项目文件
cnpm/npm i 反向安装依赖模块