600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传(纯JS开发后台功能) 记住不是java的哦

NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传(纯JS开发后台功能) 记住不是java的哦

时间:2019-03-20 20:26:17

相关推荐

NodeJ+Express+Vue+ElementUI+multer 实现upload文件上传(纯JS开发后台功能) 记住不是java的哦

本帖子用于本人开发过程中,开心了想记录的一些知识点,转载请附上原文链接 ^V^ 啾咪啾咪

1、 .vue 页面的代码,什么引入啥啥的略过喏

template里的代码块

<el-form-item label="图片(270X152)" prop="imgUrl"><el-uploadclass="photo-uploader":action="你的地址":data="{index:'all',dir:'newTrh'} 可有可无,看个人所需":show-file-list="false":on-success="handlePhotoSuccess":before-upload="beforePhotoUpload"><img v-if="form.imgUrl" :src="form.imgUrl" class="photo"><i v-else class="el-icon-plus photo-uploader-icon"></i></el-upload></el-form-item>

export default 中 methods里面的方法

handlePhotoSuccess(res, file) {this.newsPhotoPreviewUrl = URL.createObjectURL(file.raw);this.form.imgUrl = res.img;this.$refs.form.validateField('imgUrl');},beforePhotoUpload(file) {const isJPG = ~['image/jpeg', 'image/png'].indexOf(file.type) ;const isLt1M = file.size / 1024 / 1024 < 1;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt1M) {this.$message.error('上传头像图片大小不能超过 1MB!');}return isJPG && isLt1M;},

2、 重点是这,我想记录的是后台的保存方法㖏

采用分模块管理,使用express的router模块

multer 模块得下载安装哦,npm i multer --save

介绍一下代码吧:人老了还是要记清楚一点,不然下次忘记了咋整

destination :回调函数里面放的是我们存放的地址, ${req.body.dir} 也就是我在上头.vue 代码块里面说的可有可无看个人所需,这个地方我就需要啦,为什么呢,因为我希望不同地方上传的图片放在不同文件夹里,略略路

filename:文件名,你可以以你上传时的名字命名(也就是说如果你上传的叫,XXX.jpg ,那你保存的就叫XXX.jpg,但是我不想这么做,会做解释),但是我想以时间戳和上传的额外参数为图片名,避免跟别人重复,追求个性,懒懒全部保存为png格式吧,哼!

作解释来了,XXX.jpg ,括号里的命名:callback(null,file.originalname);是不是很简单,file.originalname这个值就是我们的图片上传前的命名,so easy

注意:

代码块里的,router.post 那里哒upload.single('file') 指的是,单文件,也就是说你如果上传图片只能上传一张哦,那我要上传多张怎么办,哈哈哈,换成upload.array('photo',5) 就可以啦,5个数限制,俗称封顶。

var express = require('express');var router = express.Router();var {Friend,News,Pdf} = require('./mongoose');var timeFilter=require('./news').timeFilter;var multer=require('multer');var fileName='';var storage = multer.diskStorage({destination: function (req, file, cb) {cb(null, `public/img/${req.body.dir}`)},filename: function(req,file,callback) {fileName=`${Date.now()}-${req.body.index}.png`callback(null,fileName);}})var upload = multer({ storage: storage })router.post('/imgsave',upload.single('file'), function (req, res, next) {res.send({'img':`/img/${req.body.dir}/${fileName}`})});module.exports = router;

再说点什么呢,这个不仅仅只能上传图片哦,PDF啥啥旮旯的都可以哦,如果不上传图片,或者想保留后缀,不要全用.png 就不要想我那样写死掉,看个人所需,灵活应用

我真棒,我最棒,我是宇宙无敌第一棒,我的画风有点傻逼,不喜勿喷

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。