svg图片做网站背景,服务器上建设网站,网站为什么不被收录,做网站维护挣钱吗express框架#xff0c;在上传图片功能方面#xff0c;用formidable里面的incomingform功能#xff0c;很方便。很多功能都已经封装好了#xff0c;非常好用#xff0c;简单#xff0c;不需要写更深层次的代码了。确实不错。
下面是我自己跟着黑马教程的博客系统的部分在上传图片功能方面用formidable里面的incomingform功能很方便。很多功能都已经封装好了非常好用简单不需要写更深层次的代码了。确实不错。
下面是我自己跟着黑马教程的博客系统的部分自己写的上传文件的过程。记录一下。
express框架里面
app.js
var createError require(http-errors);
var express require(express);
var path require(path);
var cookieParser require(cookie-parser);
var logger require(morgan);var indexRouter require(./routes/index);
var usersRouter require(./routes/users);var app express();// view engine setup
app.set(views, path.join(__dirname, views));
app.engine(art, require(express-art-template));
app.engine(html, require(express-art-template));
app.set(view engine, art);
// app.engine(ar, fn)app.use(logger(dev));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, public)));app.use(/, indexRouter);
app.use(/users, usersRouter);// catch 404 and forward to error handler
// app.use(function (req, res, next) {
// next(createError(404));
// });// error handler
// app.use(function (err, req, res, next) {
// // set locals, only providing error in development
// res.locals.message err.message;
// res.locals.error req.app.get(env) development ? err : {};// // render the error page
// res.status(err.status || 500);
// // res.render(error);
// // console.log(errors::::);
// // next();
// });// app.get(/upload, require(./routes/upImg));
app.get(/upload, function (req, res) {res.render(index.html);
});app.post(/upload, require(./routes/upload));app.listen(3000, function () {console.log(server 3000);
});
// module.exports app;
这里我直接使用的是art模板比较喜欢artejs模板里面的尖括号实在有点反人类感觉尖括号阔的人都晕了还是art更加简洁。另外把一些报错的信息直接给屏蔽掉了error有的话不再渲染error直接打印出来可以更方面调试。
index页面直接就是上传文件和填写表单的页面因此直接在index的路由里面不用管
接受上传的页面是upload写在app.js里面了后面可以封装起来 不过upload本来就是封装的。
upload文件
upload.js
const formidable require(formidable);
const path require(path);module.exports (req, res) {const form new formidable.IncomingForm();form.uploadDir path.join(__dirname, ../, public, uploads);// console.log(form.uploadDir);//3.保留文件的后缀form.keepExtensions true;// console.log(form);//4.解析表单form.parse(req, (err, fields, files) {// 1. err是错误对象如果保存失败存储蜈信息。/// 2.fields 对象类型// 3. files 对象类型保存了和上传文件相关的数据.// 4.console.log(**************);console.log(files.cover.originalFilename,\n,files.cover.newFilename);extName files.cover.originalFilename.split(.)[1];console.log(extName);// xx // res.send();res.send(files);});// res.send(ok);
};
formidable 模块的incomingForm对象可以接受内容包括文字、图片等当然其他的不知道能不能接受。
另外设置了上传文件的额地址是在public下面的uploads
form.parse可以解析整个req拿出req里form表单的内容。表单控件里可以是input的text也可以是input的 file
index文件如下
index.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href/stylesheets/bootstrap.min.cssscript src/javascripts/jquery.min.js/scriptscript src/javascripts/bootstrap.min.js/scriptstyle.form-control {width: 50%;}label {padding: 10px;}/style
/headbodyh1hello{{ title }}/h1form action/upload classform-container methodpost enctypemultipart/form-datadiv classform-grouplabel for标题/labelinput typetext nametitle classform-control/divdiv classform-grouplabel for作者/labelinput typetext nameauthor classform-control/divdiv classform-grouplabel for图片/labelinput typefile namecover idfilediv classthumbnail-waperimg src alt classimg-thumbnail idpreview stylewidth: 400px; height: auto/div/divdiv classform-grouplabel for内容/labeltextarea namecontent idcontent cols30 rows10 classform-control/textarea/divdiv classbuttonsinput typesubmit classbtn btn-primary/div/formscript//选择文件上传空间var file document.querySelector(#file);var preview document.querySelector(#preview)//当用户选择完文件之后file.onchange function() {var reader new FileReader();//代表用户选择的文件列表// console.log(this.files[0]);//2.读取文件reader.readAsDataURL(this.files[0])// 3. 监听 onload事件reader.onload function() {console.log(reader.result);preview.src reader.result}}/script/body/html
里面就一个大的form其实不复杂。
下面在body上方插入一段js主要两个工作1.接收上传的图片2.当图片上传完之后渲染出图片。还是很不错的。
如下图 今天搞了一天也算是把express的文件部分弄明白了。感觉学习就是黑马的视频还是很不错反复看做出来一个项目然后再把项目里面的细节反复做几遍弄出自己的东西整体之后把各个小的知识点再钻研透了。就OK了
