vue+element-ui表单上传图片post方式

本文介绍了一个使用Vue、Element-UI和Node.js实现的图片上传功能,涉及后台配置、前端表单提交及图片路径处理。通过CORS解决跨域问题,使用formidable处理上传,并在前台展示上传图片的路径。遇到的问题包括Content-Type的设置和相同图片名的处理。文章旨在记录学习过程,提供参考。
摘要由CSDN通过智能技术生成

借鉴此文章:https://blog.csdn.net/fsfasgsfd/article/details/53121326(不过此文章js不支持jq,走过的坑)

笔记有段时间了,截图都被背叛了我,能意会的就意会一下,以此也记录一下自己的学习之路

本文是vue+element-ui+node.js+业务层分离,自己写的一些接口,若缺乏规范大家谨慎参考,可以留言告知我,会及时修改。

1、后台用的node.js,下载了三个模块,fs/path/formidable,

安装指令:

npm install fs --save-dev ,
npm install path --save-dev,
npm install formidable --save-dev

(安装后可以npm fs -v进行查询版本号,能查询到就继续下一步)

2、因为前台拦截上传,用到了跨域,这里用node.js的cors方法

把代码放到最前面也就是require引用的所有模块后面就可以咯,app.js引入上传路由地址以及使用。如下:(代码网上很多,根据项目要求设置)

具体代码:这里注意一个容易犯的错误,网上很多类似的代码:我这里去掉了Content-Type

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");//允许的请求方式类型
    res.header("X-Powered-By",' 3.2.1')
    next();
});

3、先上传路由route代码:(路由层、 controller层都是单独分开的文件)

const express = require('express');
const uploadRouter = express.Router();//express.Router类,创建模块化安装路径的处理程序。
const uploadController = require('./../controller/uploadController.js');//引用控制文件
//.route()函数,创建可链接的途径处理程序的路由路径。
uploadRouter.route('/uploadImage.do').post(uploa
  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值