elementui 上传excel文件

  • html部分
    http-request:覆盖默认的上传行为,可以实现自定义上传
    on-exceed:文件超出个数限制时的钩子
<el-upload class='image-uploader' :multiple='false' :auto-upload='true' list-type='text' :show-file-list='true'
	:before-upload="beforeUpload" :drag='true' action='' :limit="1" :on-exceed="handleExceed"
	:http-request="uploadFile">
	<i class="el-icon-upload"></i>
	<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
	<div class="el-upload__tip" slot="tip">一次只能上传一个文件,仅限text格式,单文件不超过1MB</div>
</el-upload>
  • js部分
// 上传文件之前的钩子
beforeUpload(file) {
	//判断文件格式
	let hz = file.name.split(".")[1]
	if (hz != 'xlsx' && hz != 'xls') {
		return false;
	}
},
// 上传文件个数超过定义的数量
handleExceed(files, fileList) {
	this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
},
// 上传文件
uploadFile(item) {
	let fileObj = item.file
	const form = new FormData()// FormData 对象
	form.append('upload', fileObj)// 文件对象  'upload'是后台接收的参数名
	$.ajax({
		url: "http://",
		data: form,
		type: "POST",
		contentType: "multipart/form-data",
		processData: false, //告诉jquery不要对form进行处理
		contentType: false, //指定为false才能形成正确的Content-Type
		success: function (res) {}
	})
}

你可能感兴趣的:(vue,JavaScript)