饿了么Element UI之Upload组件图片上传【原创】

图片文件换汤不换药，只要注意前端的写法即可

1.饿了么组件可以利用 http-request 的属性对上传进行自定义 :http-request="uploadFile"

2.设置文件FormData对象传入请求

const formdata = new FormData();
const file = params.file;
formdata.append("file", file);

3.全部代码

<template>
  <div style="margin-top:5%">
    <el-upload
      :onError="uploadError"
      :onSuccess="uploadSuccess"
      class="upload-demo"
      ref="upload"
      :auto-upload="false"
      accept=".eml"
      multiple
      :before-upload="beforeUpload"
      action=" "
      :http-request="uploadFile"
    >
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <el-button slot="trigger" size="small" type="primary">----</el-button>
      <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">可以同时上传多个eml文件至服务器</div>
    </el-upload>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {};
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    /**
     * 自定义:http-request="uploadFile"之后，回调方法暂且失效，所以提示信息应该写在axios里面
     */
    // 上传成功后的回调
    uploadSuccess(response, file, fileList) {
      console.log("上传文件", response);
      this.$message({
        showClose: true,
        message: "恭喜你，邮件上传成功",
        type: "success"
      });
    },
    // 上传错误后的回调
    uploadError(err, file, fileList) {
      if (err.message != "") {
        this.$message.warning(err.message);
      } else {
        this.$message.warning("网络错误，不能访问");
      }
    },
    uploadFile(params) {
      const formdata = new FormData();
      const file = params.file;
      formdata.append("file", file);
      axios
        .post("/api/EmlUploadController/uploadFile?userName="+this.userSO_json.userName, formdata, {
          headers: {
            //头部信息
            "Content-Type": "multipart/form-data",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          this.$message({
            showClose: true,
            message: "恭喜你，邮件上传成功",
            type: "success"
          });
        })
        .catch(error => {
          //前端的token留在点击退出按钮那里删除，这里就只是提示过期
          if (error.message != "") {
            this.$message.warning("此封一模一样邮件你已经上传过了");
          } else {
            this.$message.warning("后端token过期，请重新登录");
          }
        });
    },
    //添加任务
    async beforeUpload(file) {
      console.log("beforeUpload");
      // const extension = file.name.split(".")[1] === "eml";
      // const isLt2M = file.size / 1024 / 1024 < 10;
      // if (!extension) {
      //   console.log("上传邮件只能是 eml格式!");
      // }
      // if (!isLt2M) {
      //   console.log("上传邮件大小不能超过 10MB!");
      // }
      // return extension && isLt2M;
    },

    //提交
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>
<style scoped>
.el-table--border,
.el-table--group {
  border: none;
}
.el-table__header-wrapper th:nth-last-of-type(2) {
  border-right: none;
}
.el-table--border td:nth-last-of-type(1) {
  border-right: none;
}
.el-table--border::after,
.el-table--group::after {
   0;
}
.el-select .el-input {
   180px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.input-with-select {
  margin-left: -5px;
}
.select {
  margin-left: 0px;
}
.input-with-select {
  background-color: #fff;
   390px;
}
.pagination {
  height: 80px;
  text-align: center;
}
.choose {
  float: left;
}
.upload-demo {
  float: left;
}
.button1 {
  left: 40%;
}
.button2 {
  text-align: center;
}
.divider {
  margin: 0;
}
.conditionalQuery {
  float: right;
  height: 60px;
  margin-right: 80px;
}
</style>