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

  • 最近项目中用到了一个上传功能,在前后端进行联调的时候一直报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>

最后

  • 如果遇到什么问题就留言吧,能解决大家一起解决一下
  • 要您觉得有用,就点赞收藏鼓励一下把
  • 文章是自己手敲,是对工作日常的总结,如有错误之处,敬请指正
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。