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
    评论
使用 ElementUI 上传文件到后端,您需要: 1. 配置上传组件 ``` <el-upload class="upload-demo" action="/your/upload/api" :auto-upload="false" :on-change="handleChange"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button size="small" type="success" @click="upload">上传到服务器</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> ``` 2. 在Vue.js实例编写上传方法 ``` methods: { handleChange(file, fileList) { // file: 当前操作的文件对象 // fileList: 已上传的文件列表 }, upload() { const formData = new FormData(); // 获取上传组件的所有文件 this.$refs.upload.uploadFiles.forEach(file => { // 将文件添加到formData formData.append('file', file.raw); }); // 发送POST请求,将formData上传到后端 axios.post('/your/upload/api', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { // 处理响应结果 }).catch(error => { // 处理异常情况 }); } } ``` 3. 在后端编写文件上传接口 根据您的后端实现方式不同,可能需要使用不同的技术栈和框架来编写文件上传接口。通常情况下,您需要在后端编写一个接收POST请求的API,将接收到的文件保存到指定的目录,并返回上传成功的响应结果。 以上是一个简单的 ElementUI 文件上传到后端的示例,您可以根据您的实际需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值