去elementui找一个需要的el-upload组件
<el-upload
action="http://localhost:3000/upload/api/uploads" //这个地址是上传图片到的服务器的地址
list-type="picture-card"
:on-preview="handlePictureCardPreview" //点击文件列表中已上传的文件时的钩子
:on-success="uploadSuccess" //文件上传成功时的钩子
>
<i class="el-icon-plus"></i>
</el-upload>
每个钩子函数都有三个参数,可以打印查看相关参数,可通过file获取相关图片的地址和一个提供的uid,将其保存到一个formData对象,然后将其表单提交至后端
uploadSuccess(res, file, fileList) {
console.log(file)
},
handlePictureCardPreview(res, file, fileList) {
console.log(file)
},
二、后端
本文使用的express框架生成的项目
1、先npm一个中间件multiparty,通过他获取文件数据
const multiparty = require('multiparty')
2、编写restful接口
router.post('/api/uploads',function(req,res,next){
let form = new multiparty.Form();
form.uploadDir="./public/images";//图片存储地址
// form.keepExtensions=true; //是否保留后缀
form.parse(req,function(err,fields,files){ //其中fields表示你提交的表单数据对象,files表示你提交的文件对象
// console.log(fields,files);
let url = files.file[0].path.replace(/\\/g,'/').replace(RegExp('public'),'')//这个是对图片地址格式做一个格式修改
console.log(url)
if(err){
res.json({
code:400,
msg:"上传失败!"+err
});
}else{
res.send({
code:400,
msg:"上传成功!",
imgSrc: 'http://localhost:3000/' +url //返回前台图片的地址(如果要在另一个系统中展示图片)
});
}
})
})