效果

Attribute使用方式

方法 | 说明 | l类型 | 默认
-------- | ----- | ----- | ----- |
on-remove| 文件列表移除文件时的钩子| function(file, fileList) |— —
on-success |文件上传成功时的钩子 |function(response, file, fileList) |— —
on-error| 文件上传失败时的钩子 |function(err, file, fileList) | —
on-progress| 文件上传时的钩子| function(event, file, fileList) | — —
on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 |function(file, fileList)| — —
before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) |— —
before-remove| 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 |function(file, fileList)| — —
list-type | 文件列表的类型 |string| text/picture/picture-card text

auto-upload（关闭自定义上传）

auto-upload:false
关闭自定义上传

代码块

<template>
    <div class="upload-container">
<!--      文件上传 先关闭自动上传-->
      <div class="upload-container-box">
       <template>
<!--         :action="uploadForm.uploadUrl"-->
        <el-upload
          class="upload-demo"
          :accept="uploadForm.accept"
          ref="uploadRef"
          drag
          :onRemove="handleRemove"
          :onChange="handlChange"
          :beforeUpload="beforeUpload"
          :action="uploadForm.uploadUrl"
          :autoUpload="false"
          :fileList="uploadForm.fileList"
          list-type="picture"
          :httpRequest="designUpload"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传单个png、jpg文件，且不超过500kb！</div>
        </el-upload>
         <div style="text-align: center">
           <el-button type="primary" plain @click="submitBtn" style="margin-top:10px">上传到服务器</el-button>
         </div>
</template>
      </div>
    </div>
</template>

<script>
//上传逻辑自己写
import axios from "axios";
export default {
  name: "Upload",
  data() {
    const uploadTypeForm = {
      text: ["jpg", "png", "jpeg", "svg"]
    };
    return {
      uploadForm: {
        accept: uploadTypeForm.text.join(","),
        uploadUrl: "", //上传的url 默认空
        fileList: []
      }
    };
  },
  methods: {
    /**
     * 文件删除回调
     */
    handleRemove(file, fileList) {
      this.uploadForm.fileList = fileList;
    },

    /**
     * 选择文件时回调
     */
    handlChange(file, fileList) {
      this.uploadForm.fileList = fileList;
    },
    //上传前的回调
    beforeUpload: function(file) {
      console.info("上传前的钩子", file);
    },
    submitBtn() {
      if (this.uploadForm.fileList.length <= 0) {
        this.$message({
          message: "请先选择文件！",
          type: "error"
        });
      }
      this.$refs.uploadRef.submit(); //触发自定义上传
    },

    //自定义上传  //  自己对接后端逻辑
    designUpload(params) {
      console.info("自定义上传", params);
      const that = this;
      const formData = new FormData();
      formData.append("file", params.file);
      const header = {
        "Content-Type": "mutipart/form-data"
      };
      const upLoadUrl = "https://jsonplaceholder.typicode.com/posts/"; //上传服务器的接口对接
      axios({
        url: upLoadUrl,
        method: "post",
        data: formData,
        headers: header
      })
        .then(res => {
          console.info("res", res);
          params.onSuccess(); //成功icon
          that.$message({
            message: "上传成功！",
            type: "success"
          });
        })
        .catch(r => {
          that.$message.error("上传失败！");
          throw Error(r);
        });
    }
  }
};
</script>

<style scoped>
.upload-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.upload-container-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

效果

选择文件

失败

成功

传递formdata参数