vue 项目中使用原生 input type=“file“上传图片，限制上传大小，限制上传类型

• 页面上的样式

<input type="file" accept="image/*" @change="changefile">

• 实现 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’ }