vue+node+axios实现文件上传

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue+node+axios实现文件上传，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1145字，纯文字阅读大概需要2分钟。

内容图文

百度了很多东西，有点绕，不废话，直接上代码

html部分代码：

<div id="app">
        <input type="file" name="file" @change="changeFile" /><br />
        <button @click="sendAjax">发送请求</button><br />
        <p>已经上传{{rate}}%</p>
    </div>

vue部分代码：

var app=new Vue({
            el:'#app',
            data:{
                file:{},
                rate:0
            },
            methods:{
                sendAjax:function () {
                    
                },
                changeFile:function (e) {
                    this.file=e.target.files[0];
                },
                cancle:function () {

                }
            }
        });

axios部分代码：

sendAjax:function () {
    var fd=new FormData();      //创建form对象
    fd.append("file",this.file);        //通过append向form对象添加数据
    axios.post("http://127.0.0.1/addGoods2",fd,{
    onUploadProgress: (progressEvent) => {      //这里要用箭头函数
         //不然这个this的指向会有问题
         this.rate=parseInt( (  progressEvent.loaded/progressEvent.total  ) * 100 );
    }
    });
},

nodejs部分代码：

app.post("/addGoods2",upload.single("file"),function(req,res){
    var fileName="";
    console.log(req);
    if(req.file!=undefined){
        fileName=new Date().getTime()+"_"+req.file.originalname;
        fs.renameSync(req.file.path,__dirname+fileUploadPath+"/"+fileName);      //重命名，加后缀，不然图片会显示乱码，打不开
    }
    res.send("1");
});

这里，需要引入express，和multer模块

OK啦，需要注释的地方都写了注释~

内容总结

以上是互联网集市为您收集整理的vue+node+axios实现文件上传全部内容，希望文章能够帮你解决vue+node+axios实现文件上传所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---