vue + vant(upload)组件+node上传图片

网页上想通过上传本地图片然后保存到后端，这次我结合了vant的uploader组件

前端：

html：

<van-uploader v-model="fileList" accept="file" :after-read="afterRead" :preview-image="false" multiple />

script： 

afterRead(file){
                console.log(file.file)
                var form = new FormData()
                form.append('avatar',file.file)
                console.log(form.get("avatar"))
                //使用post上传，由于在vue使用post上传表单数据记得更改header
                this.$http({
                    method: "POST",
                    url: "http://localhost:8855/register",
                    data: form,
                    headers: {'Content-Type': "multipart/form-data"}
                })
            }

上传图片后网页显示的图片信息

node端（仅测试，无其它功能）

router.post("/register",async (req,res) =>{
//测试用的跨域设置，实际需要在vue端配置代理服务器
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
	res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
	//console.log(req)
	console.log(req.files)
    //注意接收到的是一个数组
	console.log(req.files[0].filename)
	let imgUrl=""
	if(req.files.length > 0){
        //根据实际写的后端存储路径（该路径是相对与server.js主服务器路径的，不是相对于其他模块组件）
		let oldname = "./www/images/" + req.files[0].filename
		let newname = oldname +"."+ req.files[0].originalname.split(".")[1]
        //rename是自己封装的改名函数，因为后端收到的文件名是没有后缀的需要加上原图片后缀
		imgUrl = await rename(oldname,newname)
		}
		res.send(new Success())
	})

后端接收到的数据，注意源文件名和实际上传到后端的文件名

后端封装的rename函数（异步函数需要配合上图node服务器配置中写的的async）：

 然后就能在nodeserver的www/image看到前端传过来的图片啦