element上传附件（el-upload 超详细）

经常会有人问我上传照片怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，我们慢慢看，先看结构代码，之中有注释：

<template>
  <div class="ceshi">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUploada"
          >
            <img
              v-if="coverImg"
              :src="api + coverImg"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <p style="color: #666; margin-top: 6px; margin-bottom: 12px">
              点击添加
            </p>
          </el-upload>
  </div>
</template>
<script>

// js文件 接口配置
// // 批量上传文件
// export function filesArray(data) {
//   return request({
//     url: "/upload/files",
//     method: "post",
//     headers: { "Content-Type": "multipart/form-data" },
//     data: data
//   });
// }

import {filesArray } from "@/api/curriculum";//上传接口
export default {
  components: {
  },
  data() {
    return {
      coverImg:'',
      loadingstate: false,
      api: window.g.BASE_API,
    };
  },
  watch: {
  
  },
  methods: {
    // 封面上传
    handleAvatarSuccess(response, file, fileList) {
      this.loadingstate = false;
    },
    // 文件格式验证
     beforeAvatarUploada(file) {
      this.loadingstate = true;
      let index = file.name.lastIndexOf(".");
      let extension = file.name.substr(index + 1);
      let extensionList = [
        "png",
        "PNG",
        "jpg",
        "JPG",
        "jpeg",
        "JPEG",
        "bmp",
        "BMP",
      ];
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message({
          message: "封面不可超出10M",
          type: "warning",
          center: true,
        });
    
        return false;
      } else if (extensionList.indexOf(extension) < 0) {
        this.$message({
          message: "当前文件格式不支持",
          type: "error",
          center: true,
        });
  
        return false;
      } else {
        const obj = new FormData();
        //上传文件
        obj.append("files", file);
        // 上传文件接口
        filesArray(obj).then((res) => {
          if (res.code == 200) {
            this.coverImg = res.data[0].accessUrl;//接口地址
          }
        });
      }
    },
  },
  created() {
  },
};
</script>
<style scoped>
  .ceshi{
    margin: 50px 600px;
  }
  img {
    width: 200px;
    height: 200px;
  }
</style>