创新项目实训——前端文件上传

任务

后端已经完成了Excel的上传逻辑以及Excel到CSV格式的转化，现需要开发前端的上传功能，并实现前后端的良好交互。

本项目使用Element-ui组件库中的el-upload进行数据上传，首先保证配置安装好Element-ui。

具体流程

表单封装

1. 关键在于要将上传的文件放入到form表单中，然后一起传回到后端进行处理，所以在设计form表单时，应该有如下的格式：

  data(){
    return{
      form:{
        necessary:"",//分析目标
        name:"",//图表名称
        file:null,//上传文件
        decoration:{},//存放处理过后的构建图表的结构数据
      },
      fileList:[],//文件列表
    }
  },

2. 设计form表单组件，使用Element UI提供的表单组件，通过:model绑定一个名为form的数据对象，这意味着表单中的输入值会与这个数据对象的属性同步。

<el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="分析目标">
      <el-col :span="12"><el-input v-model="form.necessary" placeholder="请输入分析目标" /></el-col>
    </el-form-item>
    <el-form-item label="图表名称">
      <el-col :span="12"><el-input v-model="form.name" placeholder="请输入图表名称" /></el-col>
    </el-form-item>
    <el-form-item label="文件上传"><!--此处处理文件上传逻辑-->
    </el-form-item>
  </el-form>

文件上传

使用文件上传使用Element ui中的组件el-upload，主要关注点在于文件上传功能的实现以及表单的提交与重置操作。

  <el-upload
    action="#"
    :before-upload="beforeUpload"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-change="handleChange"
    :file-list="fileList"
  >
    <el-button type="primary" plain>选择文件</el-button>
  </el-upload>
<el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
<el-button @click="reset">重置</el-button>

• action="#": 这里action属性设置为#，在实际项目中应该替换为你的文件上传API地址，即文件将被发送到的服务器端点。

• before-upload：文件上传前的处理，如判断文件格式是否正确；文件大小是否合适；以及最为重要的阻止默认的action行为。以便与表单内容一起提交。

• on-remove：删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。

• on-preview：点击文件列表中已上传的文件时的钩子。点击已上传文件列表中的预览链接时触发的函数，通常用于展示文件的预览。

• on-success：文件上传成功时的钩子。文件上传成功后的回调函数，可以用来处理成功的提示或后续逻辑。

• on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。文件状态改变时的回调，例如文件选择后或上传进度变化时。

• file-list: 绑定一个数组，用于展示已选择或已上传的文件列表。fileList需要在Vue实例的data选项中定义。

    handleChange(file,fileList){
      this.fileList=fileList
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeUpload(file) {
        //判断文件类型
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
       this.$message.error('只能上传Excel文件！');
        return false;
      }
      this.fileList.push(file)
      this.form.file = file; // 保存文件到formData，以便后续上传
      this.$notify({
      title: '成功',
      message: '上传成功',
      type: 'success'
    });
      return false; // 阻止默认上传行为，因为我们将在提交表单时手动处理
    },
    handleSuccess(file,fileList){
      console.log(file)
    }

提交与重置

1. Submit：将封装表单数据提交到后端接口，并处理后端的响应数据。

    // 提交表单
    submitForm() {
        //封装表单数据
      let param=new FormData()
      param.append("file",this.form.file)
      param.append("name",this.form.name)
      param.append("necessary",this.form.necessary)
        //调用后端接口
      analyseData(param).then(response=>{
        console.log(response)//打印响应信息
      })
    },

import request from '@/utils/request'

export function analyseData(data) {
    return request({
      url: '/api/ai/analyse',
      method: 'post',
      data
    })
}

• 使用FormData对象来封装表单数据，这是非常适用于文件上传的，因为FormData能够很好地处理二进制数据如文件，并且能自动设置正确的Content-Type。
• 调用后端接口，此处analyseData(param)是一个封装好的axios请求方法，它接收一个参数（这里是封装好的FormData对象），并向后端发起POST请求。

• 处理响应，使用.then()来处理异步请求的成功响应。

2. Reset：用于重置表单的各个字段到初始状态，包括清除文件、清空文本输入框内容以及清空文件列表。

    //重置表单
	reset(){
      this.form.file=null,
      this.form.name="",
      this.form.necessary=""
      this.fileList=[]
    },

效果展示

1. 前端表单及文件上传视图，示例如下：

2. 后端数据响应展示如下：