思路:
<input type="file" name="file" capture="camera" @change="takePhoto($event)">
可以调用原生的相机
<input type="file" accept="image/*" @change="takePhoto($event)" name="file">
可以调用原生的相册
然后就是获取照片了,可以通过绑定change事件来获取,
最后就是上传,可以用formData来上传,也可以转成base64上传(参考https://www.jianshu.com/p/c562398f169b),本文采用formData结合axios上传
js:
takePhoto(e){//拍照功能---上传头像
var file=e.target.files[0]//获取文件对象
var fd=new FormData()//构造formdata对象
fd.append('file',file)//向formdata里面存放键值对
fd.append('uid',this.$store.getters.getUid)//向formdata里面存放键值对,this.$store.getters.getUid是用户的uid
this.axios.post("http://127.0.0.1:7000/me/upAvatar",fd).then(res=>{
if(res.data.code===1){
//如果上传成功,则获取图片的地址
this.getAvatar()
}
})
},
nodejs的后台接收:
//需要引进的模块,这是一个路由器里面的
const express=require("express")
const router=express.Router()
const pool=require("../pool")
const multer=require('multer')
const fs=require('fs')
//上传头像
router.post("/upAvatar",multer({
dest:'upload'//upload表示上传到upload文件夹,如果不存在会自动创建
}).single('file'),(req,res)=>{//single('file')表示单文件上传,file表示input的name名,这里需要注意,如果有多个input都是上传图片用的,则name都要相同
var uid=req.body.uid
//上传了图片
var fileName=new Date().getTime()+"_"+uid+"_"+req.file.originalname//文件名重命名
fs.renameSync(req.file.path,__dirname+"../../upload/"+fileName)//新命名的路径替换掉原来的路径,显示图片
//保存地址到数据库,每个用户都有一个默认的图片和地址,更新地址就可以
var avatar="//127.0.0.1:7000/"+fileName
var sql=`update xs_user set avatar=? where uid=?`
pool.query(sql,[avatar,uid],(err,result)=>{
if(err) throw err;
if(result.affectedRows==0){
res.send({code:-1})
}else{
res.send({code:1})
}
})
})
版权声明:本文为weixin_44494811原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。