vue+node+axios实现图片上传

用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接收图片后的处理方法仍然是修改名称和路径，将路径保存到数据库，然后返回路径给前台