vue+h5实现移动端拍照和上传功能

思路：

 <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})
        }
    })
})