本文共 843 字，大约阅读时间需要 2 分钟。

• 页面上的样式

• 实现 changefile 方法

/* 上传图片操作 */changefile(event) {
   	/* 获取到你选择的文件 */    let file = event.target.files[0];		/* 限制文件上传类型 */	let suffixName = file.name.substring(file.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */	if (suffixName !== 'jpg' && suffixName !== 'png') {
   		this.$message.warning("上传文件只能是 jpg、png 格式!");		return;	}	/* 限制文件上传大小 */	let isLtSize = file.size / 1024 / 1024 < 10;	if (!isLtSize) {
   		this.$message.warning("上传文件不能超过 10MB!");		return;	}		/* 上传文件必须要用 formData 构造条件去构造请求参数 */	let formData = new FormData();	formData.append('file', file);	/* 调用后台上传图片的接口 */	uploadFile(formData).then(res => {
   		// res 就是你图片上传成功后的返回值		// 拼接上你的项目地址就能成功访问到图片地址了		console.log("上传图片操作", res.url);	});}

• uploadFile 是项目中通过 axios 封装好的请求，你们按照自己项目的封装请求去用就可以了，也可以通过远程的 ajax 发送请求上传图片

注意点：上传图片，headers 一定要携带 { ‘Content-Type’:‘multipart/form-data’ }

转载地址：http://htqwi.baihongyu.com/