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

借鉴此文章：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(uploadController.uploadImage);
//公开
module.exports = uploadRouter;

4、controller控制层代码：请求url ：/uploadImage.do

 

//引用模块：
const formidable = require('formidable');
const path = require('path');
const fs = require('fs');
//详细处理上传图片的代码：
let user = {
    uploadImage:function (req,res) {
        let form = new formidable.IncomingForm();
        form.encoding = 'utf-8';//编码
        form.uploadDir = path.join(__dirname + "/../public/images/packImage");//可以修改为自己保存上传图片的文件地址，这里的关系看如下图片
        form.keepExtensions = true;//保留后缀
        form.maxFieldsSize = 2 * 1024 * 1024;//上传图片大小2m

        //处理图片
        form.parse(req, function (err, fields, files) {
            console.log(files.file.name);
            let filename = files.file.name//文件名字
            let nameArray = filename.split('.');//分割
            let type = nameArray[nameArray.length - 1];
            let name = '';
            for (let i = 0; i < nameArray.length - 1; i++) {
                name = name + nameArray[i];
            }
            let date = new Date();
            let time = '_' + date.getFullYear() + "_" + date.getMonth() + "_" + date.getDay() + "_" + date.getHours() + "_" + date.getMinutes();
            let avatarName = name + time + '.' + type;
            let newPath = form.uploadDir + "/" + avatarName;
            fs.renameSync(files.file.path, newPath);  //重命名
            console.log(avatarName);
            res.send({data: "/images/packImage/" + avatarName})// "/images/packImage/"写自己的保存上传图片的文件
        })
    }
}
module.exports = user;

接口代码到此为止，接下来是前台代码

5、前台vue,表单形式提交上传图片

 

5.1、data和事件

6、扩展1:最终上传图片路径展示：

6.1、获取图片路径：

uploadSuccess(res, file, fileList){ 
     console.log(res) 
}

 

手册解释：http://element-cn.eleme.io/#/zh-CN/component/upload#upload-shang-chuan

有三个参数，可以打印出来看看

on-success文件上传成功时的钩子function(response, file, fileList)

6.2、获取图片路径：（本来此处打印结果有截图，但是图片背叛了我。。。所以大家自己可以打印试试）

uploadSuccess(res, file, fileList){
 console.log(res.data) 
}

7、扩展2:上传图片成功怎样获得自己图片的名字：

//bug:图片名字最好拼接一下， 不然上传图片名字一样，这就。。。

uploadSuccess(res, file, fileList){
 console.log("file.name:"+file.name)
 }

代码得海洋有些深，我这还不会游泳，就带着游泳圈，还要带个打气筒，时不时打点气，不让自己沉下去。

希望通过我们得交流和学习，能够慢慢有艘船，在大海中航行，不用为了活下去而忽略海上得风景，其实慢慢成长我们会发现，大海，真是个神秘得地方。

学习使我们优秀，我们一起加油吧！