Vue项目下使用element-ui中Upload组件的http-request自定义上传文件

前言

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

代码直接搬运可查看效果

template

<template>
  <div>
    <el-upload
      class="upload-excel"
      ref="upload"
      action="string"
      accept=".xlsx,.xls"
      :limit="1"
      :http-request="httpRequest"
      :file-list="fileList"
      :auto-upload="false"
      :before-upload="beforeExcelUpload"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload"
      >
        点击上传
      </el-button>
      <div slot="tip" class="el-upload__tip">
        只能上传 xlsx/xls 文件，且不超过 1MB
      </div>
    </el-upload>
  </div>
</template>

这里大致说一下各参数作用

• action 必选参数，上传的地址，如果我们使用http-request，action可以传入字符串，人家说了必选，不能空着，此时action无作用
• accept 接受上传的文件类型
• limit 最大允许上传个数
• file-list 上传的文件列表，我们绑定的fileList需要在data中声明
• http-request 覆盖默认的上传行为，可以自定义上传的实现
• before-upload 传文件之前的钩子，参数为上传的文件，若返回 false则停止上传。我们可以在这里对文件上传格式及大小做出限制

script

<script>
import { uploadExcel } from '@/api/test';

export default {
  name: 'testMenu11',
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传文件之前的钩子,上传前对文件的大小和类型进行判断
    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', '葵花宝典');
      fd.append('userId', '001');
      // query是放在params中接收的参数，fd是放在了body中接收
      uploadExcel({ query: 'query' }, fd)
        .then((res) => {
          if (res.meta.code == 1) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: '上传失败，请重新上传',
            type: 'error'
          });
        });
    }
  }
};
</script>

api

// src/api/test.js
import request from '@/utils/request.js';

// 文件上传
export function uploadExcel(query, data) {
  return request({
    url: '/mock/test/upload',
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    params: query,
    data
  });
}

参考

• TODO

补充

文件上传代码其实很简单，但是衍生出来的知识点很多，这个待补充。

最后

• 文章是自己手敲，是对工作日常的总结，如有错误之处，敬请指正
• 如果遇到什么问题就留言吧，能解决大家帮忙一起解决一下