在自己做一个简单的后台管理系统时,用的是节点作本地数据库,然后用了Element-ui的上传组件来实现图片的上传,中间有遇到那么点小坑,这里记录下,比较坑的一点就是,不知道文件的命名不能带空格,然后改了好久
<强> 1.指数。vue文件
这里的话,就是简单点的使用图形界面框架Element-ui的上传组件,然后,行动就是服务器端的地址,我这里使用了代理,将localhost: 8080代理到你使用节点作为服务器的地址就可以了
& lt; template>
& lt; div类=栋⒎泊铩吩?
& lt; img
:src=" https://www.yisu.com/zixun/avatar?avatar: defaultImg”/比;
& lt;/div>
& lt; el-upload
类=" upload-demo "
拖
action=" http://localhost: 8080/api/上传”
:show-file-list=" false "
:成功=" uploadImgSuccess”
比;
& lt;我类=" el-icon-upload "祝辞& lt;/i>
& lt; div类=" el-upload__text "祝辞将文件拖到此处,或& lt; em>点击上传& lt;/em> & lt;/div>
& lt;/el-upload>
& lt;/template>
& lt; script>
从“@/资产/img/进口defaultImg avatar.png”
出口默认{
数据(){
返回{
《阿凡达》:“
}
},
方法:{
uploadImgSuccess (res) {
这一点。《阿凡达》=res.result.url;
}
}
}
& lt;/script>
之前
<强> 2。代理文件
我这里使用的是vue-cli3脚手架来搭建的项目,所以,自己在项目的根目录下创建一个vue.config。js来做一些配置
模块。出口={
devServer: {
端口:8080
标题:{
},
内联:没错,
覆盖:没错,
统计数据:“错误”,
代理:{
“/api”: {
目标:“http://127.0.0.1:3000”,
changeOrigin:真//是否跨域
}
}
},
};
之前
<强> 3。节点服务器端文件
这里很重要的一点就是设置静态资源目录
app.use ('/serverImage ' express.static(路径。加入(__dirname serverImage)));
对图片上传进行了方法的封装
const fs=要求(fs);
const path=要求(“路径”);/*强大的用于解析表单数据,特别是文件上传*/const强大=要求(“令人敬畏的”);/*用于时间格式化*/const formatTime=要求(“silly-datetime”);/*图片上传*/模块。出口=(点播,res)=比;{/*创建上传表单*/让形式=new formidable.IncomingForm ();/*设置编码格式*/的形式。编码=皍tf - 8”;/*设置上传目录(这个目录必须先创建好)*/的形式。uploadDir=路径。加入(__dirname,“. ./serverImage”);/*保留文件后缀名*/的形式。keepExtensions=true;/*设置文件大小*/的形式。maxFieldsSize=2 * 1024 * 1024;/*格式化形式数据*/的形式。解析(请求,(呃,字段,文件)=比;{
让文件=files.file;/*如果出错,则拦截*/如果(err) {
返回res.send({“状态”:500年,味精:“服务器内部错误的,结果:"});
}
如果文件。大小比;form.maxFieldsSize) {
fs.unlink (file.path);
返回res.send({“状态”:1、“味精”:“图片不能超过2米的,结果:"});
}/*存储后缀名*/让extName=";
开关(file.type) {
例“图像/png”:
extName=皃ng”;
打破;
例“图像/x-png”:
extName=皃ng”;
打破;
例“图像/jpg”:
extName=癹pg”;
打破;
”image/jpeg情况”:
extName=癹pg”;
打破;
}
如果(extName。长度==0){
返回res.send({“状态”:1、“味精”:“只支持jpg和png格式图片”,结果:"});
}/*拼接新的文件名*/让时间=formatTime。格式(新日期(),“YYYYMMDDHHmmss”);
让num=Math.floor (math . random () * 8999 + 10000);
让imageName='{时间}_ {num}。美元$ {extName} ';
让newPath=形式。uploadDir +‘/? imageName;/*更改名字和路径*/fs.rename(文件。路径、newPath (err)=比;{
如果(err) {
返回res.send({“状态”:1、“味精”:“图片上传失败的,结果:"});
其他}{
返回res.send({“状态”:200年,“味精”:“图片上传成功”,结果:{url: http://localhost: 3000/serverImage/$ {imageName} '}});
}
}）
}）
};
方法的调用
const表达=要求(“表达”);
const路由器=express.Router ();
const uploadImg=要求('/uploadImg。');/*上传图片*/路由器。邮报》('/上传'(点播,res)=比;{
uploadImg(点播,res);
});
模块。出口=路由器;
