笔记有段时间了，截图都被背叛了我，能意会的就意会一下，以此也记录一下自己的学习之路
本文是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,表单形式提交上传图片
<template>
<!-- 弹出框 -->
<el-dialog title="编辑" @click="close" :visible.sync="editVisible" width="30%">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="包装编号" prop="PackingId">
<el-input type="text" v-model="form.PackingId" style="width: 100%;" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="包装名称" prop="PackingName">
<el-input v-model="form.PackingName"></el-input>
</el-form-item>
<el-form-item label="包装价格" prop="PackingPrice">
<el-input v-model="form.PackingPrice"></el-input>
</el-form-item>
<el-form-item label="图片上传" prop="PackingImage">
<el-upload
class="upload-demo"
action="http://localhost:9987/uploadImage.do"
:on-success="uploadSuccess"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList2"
list-type="picture"><!-- on-success是api里的上传成功的钩子；file-list是显示图片 -->
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false,saveAddState=false,saveEditState=false">取 消</el-button>
<el-button type="primary" v-if="saveEditState" @click="saveEdit">确 定</el-button>
<el-button type="primary" v-if="saveAddState" @click="saveAdd">添 加</el-button>
</span>
</el-dialog>
</template>
5.1、data和事件
<script>
export default {
name: 'pack',
data() {
return {
uploadImageUrl:"",//存储上传图片返回的路径
uploadImageName:"",//上传图片的名字
fileList2: [],//存放需要显示的图片的名字和路径
}
}，
methods: {
//上传图片
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
//上传成功后获取到图片路径,并且把原本的图片名称传到后台去，需要拼接一下
uploadSuccess(res, file, fileList){
var name=file.name;
var uploadImageFalseUrl=res.data.split("/");//获取图片原始路径 /images/packImage/2_2018_7_4_13_22.png this.uploadImageUrl="/"+uploadImageFalseUrl[1]+"/"+uploadImageFalseUrl[2]+"/"+name;//拼接图片原本名字，真实传到后台的路径 res.data.split("/")[1]为images， res.data.split("/")[2]为packImage
},
}
</script>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)
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
