1.vue中
<Upload
class="writeResumeHeadImg"
:show-upload-list="false"
:before-upload="handleUpload"
action="//jsonplaceholder.typicode.com/posts/">
<img class="jm-upload-img" :class="imgClass" :src="imgUrl" />
</Upload>
js
handleUpload(file) {
// 需要传给后台的file文件
this.file = file;
// FileReader api 为用户提供了方法去读取一个文件或者一个二进制大对象,
// 并且提供了事件模型让用户可以操作读取后的结果
const reader = new FileReader();
// readAsDataURL:读取为base64格式
reader.readAsDataURL(file);
// onload 在文件读取成功时触发
reader.onload = () => {
const ImgBase64 = reader.result;
// 实现预览,实际是拿到图片的base64数据去挂在到图片的src上
this.imgUrl = ImgBase64;
};
this.postImage();
return false;
},
postImage() {
var file = this.file;
let data = new FormData();
data.append("file", file, file.name); //很重要 data.append("file", file);不成功
data.append("data", 112);
console.log(data.get("file"));
this.axios.post("resumes/file", data, {
headers: { "content-type": "multipart/form-data" }
});
}
2.node中,upload为node中的新建的存图片的文件夹
//上传接口
router.post('/file',
multer({
//设置文件存储路径
dest: 'upload' //upload文件如果不存在则会自己创建一个。
}).single('file'), function (req, res, next) {
if (req.file.length === 0) { //判断一下文件是否存在,也可以在前端代码中进行判断。
res.json({
status: "1",
msg: "上传失败" + err
});
} else {
let file = req.file;
let fileInfo = {};
console.log(file);
fs.renameSync('./upload/' + file.filename, './upload/' + file.originalname);//这里修改文件名字,比较随意。
// 获取文件信息
fileInfo.mimetype = file.mimetype;
fileInfo.originalname = file.originalname;
fileInfo.size = file.size;
fileInfo.path = file.path;
// 设置响应类型及编码
res.set({
'content-type': 'application/json; charset=utf-8'
});
res.json({
status: "0",
msg: "上传成功"
});
}
}
);