使用uniapp上传图片并将图片转化成base64格式使用nodejs存入数据库

需要下载转格式的插件image-tools
链接: link

图片转base64

前端

<u-avatar :src="imgUrl" mode="square" @tap='openChooseImg'></u-avatar>

// 选择头像
			openChooseImg() {
				uni.chooseImage({
					count: 1, //最多可选择的张数
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], //从相册选择，和摄像头功能，默认二者都有
					success: (res) => {
						console.log(res, "头像res");
						this.imgUrl = res.tempFilePaths[0]; //把选择的头像赋值给imgurl
						console.log(this.imgUrl, "this.imgUrl");
						pathToBase64(this.imgUrl) //图像转base64工具
							.then(base64 => {
								console.log(base64, 'base64');
								console.log(typeof(base64), "typeof");
								this.avatar = base64; //将文件转化为base64并显示
								this.avatarUpload(base64);
								// this.avatarUpload(base64); //同时将头像上传至数据库进行存储
							})
							.catch(error => {
								console.error(error)
							})
					},
				});
			},
			// 上传照片
			async avatarUpload(avatar) {
				const res = await uploadPic({
					pic: avatar
				})
				console.log(res)
				console.log("上传图片成功！")
			},

后端传入数据库

router.post('/uploadPic', (req, res) => {
    // const data = Object.assign({}, req.body)
    const data = req.body
        // console.log(data, "datapic")
    db.query('insert into picture_list(pic_content) values(?)', [data.pic], (err, mes) => {
        if (err) return console.log(err)
        console.log(mes)
        res.status(200)
        res.send(mes)
    })
})

其中insertId是存放图片的id，可以直接将这个id保存入用户的头像数据

将base64转化为文件

查询图片的base64并保存为文件并读取到前端的u-avatar中

后端

router.post('/dowmloadPic', (req, res) => {
    const data = req.body //Object.assign({}, req.body)
    db.query('select pic_content from picture_list where pic_id', [data.pic_id], (err, mes) => {
        if (err) return console.log(err)
            // console.log(data)
            // console.log(mes)
        res.status(200)
        res.send(mes)
    })
})

前端

// 从数据库读取图片转化为文件并显示
			async dowmPic(picID) {
				const res = await dowmloadPic({
					pic_id: picID
				})
				const base64 = res.data[0].pic_content
				console.log(base64)
				base64ToPath(base64).then(url => {
					console.log(url)
					// 直接显示到前端页面
					this.imgUrl = url
				}).catch(error => {
					console.error(error)
				})
			},