大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
准备:
前端:vue环境+axios+elemen-ui
后端:node.js multer
前端代码:
// 引入axios
import axios from ‘axios’;
// 获取用户信息
getUserInfo() {
// 发送请求 获取用户信息
getInfo()
.then(res => {
// 接收数据
let { data } = res;
this.userInfo = data[0] // 渲染
})
.catch(err => {
console.log(err)
})
},
// 头像上传成功
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
// 头上上传之前限制
beforeAvatarUpload(file) {
const isJPG = file.type === ‘image/jpeg’;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error(‘上传头像图片只能是 JPG 格式!’);
}
if (!isLt2M) {
this.$message.error(‘上传头像图片大小不能超过 2MB!’);
}
return isJPG && isLt2M;
},
// 上传函数
uploadAvatar(file) {
// 创建formData实例对象
let formData = new FormData();
// 把文件信息添加进如对象
formData.append(‘file’, file.file)
// 发送文件信息给后端
axios.post(‘/account/uploadavatar’, formData)
.then(response => {
// 获取地址
let { avatarUrl } = response.data;
// 回填
this.imageUrl = ‘http://127.0.0.1:666’ + avatarUrl;
// 传递给父组件
this.$emit(‘自定义事件’)
})
.catch(err => {
console.log(err)
})
}
后端:
// 引入node上传模块
var multer = require(‘multer’);
// 配置存储路径 和 重命名
var storage = multer.diskStorage({
// 图片上传到服务器以后 要放置的路径
destination: ‘public/upload’,
// 图片重命名
filename: function (req, file, cb) {
var fileFormat =(file.originalname).split(“.”);
// 获取时间戳
var filename = new Date().getTime();
// 124354654 + “.” + jpg
cb(null, filename + “.” + fileFormat[fileFormat.length – 1]);
}
});
// 上传对象
var upload = multer({
storage,
});
// 接收上传请求
router.post(‘/uploadavatar’, upload.single(‘file’), (req, res) => {
// 接收到的文件信息
var file = req.file;
console.log(file)
// 文件名
let fileName = file.filename;
// 拼接文件路径
let avatarUrl = ‘/upload/’ + fileName
// 构造sql
const sqlStr = `update accounts set avatarUrl = ‘${avatarUrl}’ where id=${req.user.id}`;
// 执行sql
connection.query(sqlStr, (err, data) => {
if (err) throw err;
if (data.affectedRows > 0) {
res.send({code: 0, reason: “上传成功”, avatarUrl})
} else {
res.send({code: 1, reason: “上传失败”})
}
})
})
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/170648.html原文链接：https://javaforall.net
