vue中文件上传及接收

准备:

前端: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: "上传失败"})
		}
	})
})