vue+node+axios实现图片上传

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/luckylqh/article/details/79072152

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




展开阅读全文

没有更多推荐了,返回首页