基于angular下的ionic上传头像到后端服务器，form表单的submit按钮失效! 解决方法

最新推荐文章于 2022-05-22 23:13:20 发布

原创最新推荐文章于 2022-05-22 23:13:20 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #javascript #node.js #html

本文介绍了在Angular和Ionic应用中如何处理头像上传到后端服务器的问题，当form表单的submit按钮失效时，通过在HTML中创建button并绑定事件来替代。在JavaScript文件中编写事件处理函数，手动触发表单提交，并获取上传图片的名称。在后端，使用multer和qs模块接收图片，保存到指定目录，并将信息存储到数据库。

第一步

在HTML页面写表单因为submit失效所以创建一个button绑定事件，代码如下

<form   action="http://127.0.0.1:3000/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="mypic" (change)="pic_r($event)" accept="image/*"/>
</form>
<button (click)="file()" class="fail_btn_l" type="submit">上传文件</button>

第二步

在js文件上写绑定的事件，手动调用表单

//  上传图片按钮
file(){
    var form=document.querySelector("form");
    form.submit();
}

input绑定的事件可以得到上传图片名

//  上传图片的事件
 pic_r(e){
   this.pic=e.target.value;
 }
// IMG_20190817_163103.jpg 图片名

第三步

后端接收传来的图片保存在托管的目录下并保存到数据库代码如下:

var upload=multer({dest:"./public/upic/"})
app.post("/upload",upload.single("mypic"),(req,res)=>{
    console.log(req)
      var src=req.file.originalname;
      var i=src.lastIndexOf(".");
      var suff=src.substring(0,i)
      var ftime=new Date().getTime();
      var fran=Math.floor(Math.random()*9999);
      var name=ftime+fran+suff+'.png'
      var des="./public/upic/"+name
      fs.renameSync(req.file.path,des);
      var upic="http://127.0.0.1:3000/upic/"+name
      pool.query("UPDATE computer_user SET upic=? WHERE uid=?",[upic,u],(err,result)=>{
        if(err) throw err
        if(result.affectedRows>0){
           res.redirect("http://127.0.0.1:4200/tabs/login")
        }
       })
    })

前提得有multer,qs模块包自行下载，require引入