<template>
  <div id="app">
    <!-- 
      action:存放的是文件上传到服务器的接口地址
    -->
    <!--组件里 show-file-list  是否显示已上传文件列表 -->
    <!--组件里 on-success  文件上传成功时的钩子，成功时触发 -->
    <!-- before-upload  上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
     <!-- action存放的是上传到服务器的接口地址 -->
    <el-upload
      drag
      action="/single1"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- IMG -->
    <div class="uploadImg" v-if="img">
      <img :src="img" alt />
    </div>
  </div>
</template>

<script>
/*
 * 文件上传有两套方案：
 *   1. 基于文件流（form-data）  element-ui上传组件默认是基于文件流的
 *   2. 客户端需要把文件转化为BASE64
 *
 * 默认上传
 *   格式：multipart/form-data
 *   数据格式：form-data
 *      file 文件流信息
 *      filename 文件名字
 *   上传成功后获取服务器返回信息，通知on-success回调函数执行
 * 内部封装了ajax
 */
export default {
  name: "App",
  data() {
    return {
      img: null,
    };
  },
  methods: {
    // <!--组件里 on-success 文件上传成功时的钩子，成功时触发 result是服务器返回的结果-->  
    handleSuccess(result) {
      //通过服务器返回的code值，判断成功   然后将返回的path地址，赋值给img
      if (result.code == 0) {
        this.img = result.path;
      }
    },
    // 组件里before-upload上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
    // 在这里面判断一些条件，例如多大的，什么格式的才能上传
    beforeUpload(file) {
      // 格式校验----------------------------
      console.log(file)           //可以知道得到文件的type类型和文件的size大小
      let { type, size } = file;    //file这个属性因为包含这两个值，分别赋值给变量
     //判断文件的格式  正则表达式  匹配文件类型
      if (!/(png|gif|jpeg|jpg)/i.test(type)) {
        this.$message("文件合适不正确~~");    //组件的提示方法
        return false;                        //既然判断出格式不正确，那么就return  终止函数，不往下走了
      }
     //判断文件大小1024B=1KB  1024KB=1MB   假设限定必须在200M以内的
      if (size > 200 * 1024 * 1024) {
        this.$message("文件过大，请上传小于200MB的文件~~");
        return false;
      }

      return true;           //  beforeUpload(file)  最终是返回ture的
    },
  },
};
</script>