百度了很多東西，有點繞，不廢話，直接上程式碼

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啦，需要註釋的地方都寫了註釋~