众里寻他千百度，蓦然回首，那人却在灯火阑珊处：上传の方法

0. 缘起

之前做过一个fabric.js小画板，里面用到了上传图片作为画板底图的效果。但怎么本地上传至服务器，我还真不会。要用到，于是搜索了一波，但是发现那些搜索结果，大同小异地看起来都很麻烦，想到之前组长项目里也用到过类似效果，不如观摩观摩学习学习。

1. 过程

// template
        <el-upload
          class="upload-demo"
          drag
          :action="url"
          :auto-upload="true"
          :show-file-list="false"
          :on-success="onSuccess"
          :on-error="onError"
          :headers="headers"
          :before-upload="onBefore"
          accept=".xlsx, .xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>

 methods: {
    onSuccess(response) {
      if (response.success) {
        this.$message.success({
          message: "文件上传成功",
          duration: 1000,
        });
      } else {
        this.$message.error(response.message);
      }
      this.loading.close();
    },
    // 错误响应
    onError() {
      this.$message.error({
        message: "文件上传失败",
        duration: 1000,
      });
      this.loading.close();
    },
    // 准备阶段
    onBefore() {
      this.loading = this.$loading({
        lock: true,
        text: "文件上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },

2. 想法

导出直接就是点击下载，没啥好说的。
↑图样图森破了，导出更难。。。
那么轻，那么重：图片下载与压缩包下载 - 乐盘游 - 博客园 (cnblogs.com)

我擦，我竟然以为element的上传只能传图片，我是铁憨憨！

3. 进阶

3.1 如果需要传query

直接在el-upload标签的action中，用模板字符串拼出来

            :action="`/xy/box/yinling/point/import?boxId=${boxId}`"

3.2 如果头需要传别的参数

            :headers="getHeaders()"

// Methods
    getHeaders() {
      return { boxId: this.boxId };
    },

3.3 有name要求

比如

#请求参数 file:excelFile

 name="excelFile"

3.4 总览

          <el-upload
            class="upload-demo"
            name="excelFile"
            :headers="getHeaders()"
            :action="`/xy/box/yinling/point/import?boxId=${boxId}`"
            :auto-upload="true"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-error="onError"
            :before-upload="onBefore"
            accept=".xlsx, .xls"
          >
            <el-button type="primary">导入</el-button>
          </el-upload>

附录

https://segmentfault.com/a/1190000015806229