图片上传流程

图片上传

1. input文件框

<input type="file">
选中图片

2. 上传服务器

input.onchange=function(e){
 // 上传文件到服务器
    // 上传文件时必须发送post类型的请求
    // 上传文件时必须指定一个确定的字段（属性）作用是标识这是哪个用户的头像
    // 上传文件时，先实例化一个FormData对象，将文件放入到FormData对象中，将FormData对象作为请求参数发送到服务器
    var fd=new FormData()
    fd.append('touxiang',e.target.files[0]);
    fd.append('phone',JSON.parse( localStorage.getItem('userinfo')).phone) // 唯一的标识
   axios.post('/user/touxiang',fd).then((res)=>{
       // c头像存储到本地存储
     localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
      document.querySelector('#touxiang').src=res.data.userinfo.touxiang
   }
}

3、后端接收文件的特殊处理（index.js）

const multer=require('multer')
// 配置磁盘存储引擎 
var storage=multer.diskStorage({
    // 文件存储的目的地
    destination:(req,file,cb)=>{
        // cb第一个参数时错误对象，没有就写null,第二个是存放路径
        cb(null,'static/uploads')
    },
    // 负责管理文件名
    filename:(req,file,cb)=>{
        // cb第一个参数时错误对象，没有就写null,第二个是文件名（不能写死，会覆盖）
        // cb(null,'a.png')
       // file.originalname // 原始文件名
        cb(null,new Date().getTime()+path.extname(file.originalname))
    }
})
// 应用磁盘存储引擎（让上一步配置的磁盘存储引擎生效）
var uploads=multer({storage})
// 注册文件上传中间件
// fd.append('touxiang',e.target.files[0]);
// 里面那个名字必须和 前端那个名字一样
app.use(uploads.single('touxiang'))

4、服务器接口处理（路由）

// 头像上传
router.post('/touxiang',(req,res)=>{
    // 服务器端要想拿到前端上传的文件，必须要处理文件才行（存储文件，重命名文件），否则拿不到文件
    // 服务器端借助一个三方包 multer
    // 服务器端要想拿到前端上传的文件，必须要处理文件才行（存储文件，重命名文件），否则拿不到文件
    // 服务器端借助一个三方包 multer
    // console.log(req.file.filename)
    var {phone}=req.body
    var touxiang='http://127.0.0.1:8080/uploads/'+req.file.filename;
    // 读取user.json文件中的用户数据
    var lujing=path.join(__dirname,'../json/user.json')
    var shuzu= fs.readFileSync(lujing).toString() 
   shuzu=shuzu ? JSON.parse(shuzu) : []
   // 判断用户是否存在
   var i= shuzu.findIndex((item)=>{
    return item.phone==phone
   });
   if( i != -1){
    shuzu[i].touxiang=touxiang
    res.send({userinfo:shuzu[i]})
   }
})

文件上传流程

——前端

​ 选择文件 点击input标签

​ 获取文件 通过onchange事件的参数 e.target.files

​ 发请求上传文件到服务端 （构造FormData对象，将文件添加到对象中，上传文件 axios.post()）

——后端

​ 下载multer包， npm i multer

​ 引入multer包 var multer = require(‘multer’)

​ 配置磁盘存储引擎

​ 引用磁盘存储引擎

​ 注册中间件

​ 通过接口处理上传的文件返回给客户端