elementUI实现上传excel文件并传给后端

在Vue.js中使用Element UI实现上传Excel文件并传递给后端的示例代码如下：

<template>
  <el-upload
    ref="upload"
    action="#"
    :on-change="handleChange"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取 Excel</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleChange(file, fileList) {
      this.file = file.raw; // 获取文件对象
    },
    submitUpload() {
      const formData = new FormData();
      formData.append('file', this.file); // 'file' 是后端接收文件的字段名
 
      // 使用 axios 上传文件
      this.$axios({
        method: 'post',
        url: '/your-backend-endpoint', // 后端接收文件的URL
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response);
        this.$message.success('上传成功');
      }).catch(error => {
        console.error('上传失败', error);
        this.$message.error('上传失败');
      });
    }
  }
};
</script>

确保已经安装了axios，可以通过npm安装：

npm install axios

在上面的代码中，我们首先通过el-upload组件的on-change事件获取到选择的文件，然后在submitUpload方法中，我们创建了一个FormData对象并将文件附加到该对象中，最后使用axios发送POST请求到后端接口。后端需要接收名为'file'的文件字段。