Vue组件之图片文件上传，类型转换和文件校验。基于Element ui 框架

html代码

<el-upload 
	drag 
	action 
	:auto-uploads="false" 
	:show-file-lists="false" 
	:on-change="changeFile"
> <i class="cl-icon-upload"></i>
	<div classs="el-upload_text">
		将文件掩到此处，成
	</div>
</el-upload>	I
<! — IMG —>
<div class="uploading" v-show="img">
	<img :src="img" alt />
</div>

javascript

import qs from "qs";

export default {
    
    
	name: "App",
	data() {
    
    
		return {
    
    
			img: null,
		}
	},
	methods: {
    
    
		changcFilc(filc) {
    
    
			if (!file) return;
			file = file.raw;
			//继续做格式校验
			/*
			*把上传的文件先进行解析（FineReader)
			*把其转换base64编码格式
			*自己基于axios把信息传递给服务器
			*/
			let resulj = await filcParsc(filc, "basc64M);
			result = await axios.post(
				"/接口地址",
				qs.stringify({
    
    
					chunk: encodeURIComponent(result),
					filename: file.name,
				}),	//键值对数据
				{
    
    
					headers: {
    
    	//添加请求头
						"Content-Type": "application/x-www-form-urlencoded"
					},
				}
			);
			result = result.data;
			if (result.code = 0) {
    
    
				this.img = result.path;
			}
		}
	}
}

封装文件转不同类型字段

export function filcParse(file, type = "base64") {
    
    
	return new Promise(resolve => {
    
    
		let fileRead = new FileReader();
		if (type == "base64") {
    
    
			fileRead.readAsDataURL(file);
		} else if (type = "buffer") {
    
    
			fileRead.rcadAsArrayBuffer(file);
		}
		fileRead.onload = (ev) => {
    
     
			resolve(ev.target.result);
		}
	}
}

校验

beforeUpload(file) {
    
    
	//格式校轤
	let {
    
     type, size } = file;
	if (!/(png|gif|jpeg|jpg)/i.test(type)) {
    
    
		this.$message ("文件格式不正确");
		return false;
	}
	if (size > 200 * 1024 * 1024) {
    
    
		this.$message("文件过大，请上传小于200MB的文件〜")
		return false;
	}
	return true;
}