用vue做前端，用axios上傳圖片，用node做後臺接收資料

前端部分

上傳圖片用的是formData方法上傳，用axios上傳需要注意的地方：

<script>

import axios from 'axios'

methods:{

getImg(){

//用axios()方法

//需要注意的是在ajax中使用formdata需要配置anync:true,contentType:false,processData:false,在axios中不配置                 //也能上傳

                //還有一個地方需要注意的是formData.append(name,value),裡面的name對應的是input 的name值，value對應

//的是input的files[0]，不是input.val(),對於的type=file的input，圖片是在input的FileList 裡面，

//這裡用的是this.$refs.upload.files[0]，這是因為在vue中使用this.$refs.refname來獲取dom的真實節點，用jq或者

//js的獲取節點的方法是拿不到的，

var formData = new FormData();

formData.append('file',this.$refs.upload.files[0]);

axios({

method:'post',

url:'http://localhost:3000/users/touxiang',

anync:true,
contentType:false,
processData:false,

data:formData

}).then(function(res){

console.log(res)

})

}

}

//用axios.post方法傳圖片，需要注意的

//直接將params作為引數傳到post方法內

//regis就是已經封裝好的post方法

var params = new FormData();
params.append('file',this.$refs.upload.files[0]);
userApi.regis(params).then(function(res){
console.log(res)
})

</script>

//後臺接收需要注意

//node中接收圖片一定要用multer，否則無法接收到圖片

//用multer接收圖片後的處理方法仍然是修改名稱和路徑，將路徑儲存到資料庫，然後返回路徑給前臺