首页 > 代码库 > vue2+express4图片上传
vue2+express4图片上传
vue2使用[vue-core-image-upload](https://github.com/Vanthink-UED/vue-core-image-upload/blob/master/README.md)插件提供组件。
根据文档做相应的本地修改
添加个人样式方便显示
修改text显示按钮文字,提供一个upload请求地址,这里是本地搭建的express后台地址。
<vue-core-image-upload v-bind:class="[‘borderme‘,‘pure-button-primary‘,‘js-btn-crop‘]" text="点击上传一个图片" v-bind:crop="false" url="http://127.0.0.1:3000/upload" extensions="png,gif,jpeg,jpg" v-on:click="imageuploaded"></vue-core-image-upload>
引入模块名修改为-线
import VueCoreImageUpload from ‘vue-core-image-upload‘;//方法放在//methods里面methods:{imageuploaded:function(res) {if (res.errcode == 0) {}},}
expres4环境
使用formidable中间件。
routes文件夹里创建upload.js文件
配置app.js路由,使用commejs引入upload.js文件,var upload = require(‘./route/upload‘)
配置路由app.use(‘upload‘)
upload.js
引入formidable模块,根据api写代码接收前端发来的请求
router.post(‘/‘,(req,res,next)=>{// if (req.url == ‘/upload‘ && req.method.toLowerCase() == ‘post‘) {// parse a file uploadvar form = new formidable.IncomingForm();form.uploadDir = "./uploads";form.parse(req, function(err, fields, files) {res.writeHead(200, {‘content-type‘: ‘text/plain‘});res.write(‘received upload:\n\n‘);res.end(util.inspect({fields: fields, files: files}));});return;// }})
前端上传之后会返回数据,文件会写入指定的uploadDir目录
vue2+express4图片上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。