vue中使用element ui上传excel表格并传给后台

  1. 使用该代码需要引入jquery库
  2. http-request:覆盖默认的上传行为,可以实现自定义上传
  3. on-exceed:文件超出个数限制时的钩子

html

<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) {}
	})
}

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值