• 最近项目中用到了一个上传功能，在前后端进行联调的时候一直报400，经过查阅文档，参考各个博主精品文章，问题最终解决，并写下此文章做记录，方便下次使用，如需用到可根据项目需求修改接口及http-request方法即可

要做的事：在http-request方法中使用自定义接口传参，上传文件

• 先来一段代码，然后分析一下Upload各个属性的作用

<el-upload
      class="upload-excel"
      ref="upload"
      action="string"
      accept=".xlsx,.xls"
      :limit="1"
      :http-request="httpRequest"
      :file-list="fileList"
      :before-upload="beforeExcelUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

• action 必选参数，上传的地址，如果我们使用http-request，action可以传入字符串，人家说了必选，不能空着，此时action无作用

• accept 接受上传的文件类型

• limit 最大允许上传个数

• file-list 上传的文件列表，我们绑定的fileList需要在data中声明

• http-request 覆盖默认的上传行为，可以自定义上传的实现

• before-upload 传文件之前的钩子，参数为上传的文件，若返回 false则停止上传。我们可以在这里对文件上传格式及大小做出限制

• 下面是我们最需要的一些方法

<script>
// 引入接口，在下方我会给出接口定义方式
import { uploadExcel } from "@/api/upload";
export default {
  name: "upload",
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    // 上传文件之前的钩子,上传前对文件的大小和类型进行判断
    beforeExcelUpload(file) {
      // 打印file，帮助我们了解我们需要的参数
      console.log(file);
      const isExcel = file.name.split(".")[1] === "xlsx" || file.name.split(".")[1] === "xls";
      const isSize = file.size / 1024 / 1024 < 1;
      if (!isExcel) {
        this.$message({
          message: "只能上传xls或xlsx文件!",
          type: "error"
        });
      }
      if (!isSize) {
        this.$message({
          message: "上传文件大小不能超过 1MB!",
          type: "error"
        });
      }
      return isExcel && isSize;
    },
    //  覆盖默认上传行为
    httpRequest(params) {
      let fd = new FormData();
      fd.append("file", params.file);
      fd.append("FileName", params.file.name);
      fd.append("user", "张三");
      // query是放在params中接收的参数，fd是放在了body中接收
      uploadExcel(query, fd)
        .then(res => {
          if (res.resule == 1) {
            alert("上传成功");
          }
        })
        .catch(err => {
          alert("上传失败，请重新上传");
        });
    }
  }
  // uploadExcel接口,我这里使用了两种方式传参，最后记得加上请求头
  // export function uploadExcel(query,data) {
  //     return request({
  //         url: '/api/users',
  //         method: 'post',
  //         headers: { "Content-Type": "multipart/form-data" },
  //         params: query,
  //         data
  //     })
  // }
};
</script>

最后

• 如果遇到什么问题就留言吧，能解决大家一起解决一下
• 要您觉得有用，就点赞收藏鼓励一下把
• 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正