vue 使用elementui做上传功能需要注意的点

<template>
  <div class="left-main">
    <div class="header">
      <!-- 
        ---------属性---------------
        action ： 必须写不然报错，但是我们可以只写一个属性，不指定上传的地址
        accept :  上文文件类型/后缀名
        show-file-list ： 是否展示上传列表
        multiple:是否支持多选文件
        drag : 是否可以拖拽上传
        auto-upload:是否立即上传

        ---------事件----------------
        on-change ：添加文件，上传文件。选择文件成功之后都会被调用
        before-upload:上传前的文件校验
        on-success:上传成功可以获取服务器返回信息 , 里面的参数就是服务器返回的结果
        on-exceed : 超出文件个数的钩子函数
       -->

      <el-button @click.native="dialogVisible = true">点击上传文件</el-button>
    </div>
    <div class="main">
      <el-dialog title="上传文件" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <!-- 上传文件组件 -->
        <el-upload class="upload-demo" ref="upload" :on-change="handleChange" drag action="submitUpload()" multiple
          :before-upload="uploadFlie" :on-exceed="handleExceed" :on-success="success" :limit="5" :auto-upload="false"
          :file-list="fileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitUpload">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
/*
 * 现阶段处理文件上传的两套方案:
 * 基于文件流的方式 from-data
 * 客户端需要把文件转化base64
 * 
 * 默认的格式 : form-data
 * file文件流信息
 * filename:文件名称
*/
export default {
  data() {
    return {
      dialogVisible: false, // 弹框显示
      supportTypes: ["pdf", "doc", "docx", "dot", "dotx", "wpt"], // 文件后缀名
      maxSize: 200, // 最大文件大小
      fileList: [], // 文件上传列表
      fileData: null // 上传的数据
    }
  },
  methods: {

    // 1.文件上传前的校验
    uploadFlie(file) {
      // 文件后缀名校验
      let { size, name } = file
      const nameArr = name.replace(/.+\./, "");
      if (!/(xlsx|gif|jpg)/i.test(nameArr)) {
        this.$message({
          message: '文件格式不合适',
          type: 'warning'
        });
        return false
      }
      // 文件大小校验   1024=1kb  1024kb=1mb
      if (size > 200 * 1024 * 1024) {
        this.$message({
          message: `文件忒大,请上传小于${this.maxSize}的`,
          type: 'warning'
        });
        return false
      }
      this.fileData.append("file",file); // append增加数据
      return true; // 校验成功
    },
    // 2.监控并显示上传文件列表
    handleChange(file, fileList) {
      this.fileList = fileList;
    },

    // 3.选取文件超过数量提示
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件!`
      );
    },
    // 4.文件上传
    submitUpload() {
      console.log(1);
      if (this.fileList.length === 0) {
        this.$message({
          message: "请先选择文件",
          type: "warning",
        });
        return false;
      }
      // 所有验证都通过之后,先声明formdata对象
      this.fileData = new FormData();
      this.$refs.upload.submit();
      this.fileData.append("id", 1); // 添加id,如果需要的话
      this.fileData.append("type", 5); // 添加类型,如果需要的话

      console.log(this.fileData, '这就是上传的文件');
      // 一般这里就是做数据上传接口操作了!
      // xxxx.then(res=>{.....  this.dialogVisible = false})
    },

    // 5.文件上传成功
    success(res) {
      console.log(res); // 这就是后端成功后返回的数据
    },

    // 6.关闭弹框
    handleClose() {
      this.dialogVisible = false
      this.fileList = [];
    }

  }


}
</script>

<style scoped>
.left-main {
  width: 100%;
  height: 700px;
  /* background-color:aquamarine; */
}

.header {
  width: 100%;
  height: 20%;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>