vue头像上传

<div class="upload">

      <el-upload

        :class="{ disabled: fileComputed }"

        action="/platform/recognitionController/yyzzRecognition"  //  上传地址 

        list-type="picture-card"  //  卡片 类型  

        :before-upload="beforeUpload"  //  上传 检查

        :on-remove="handleRemove"  //  删除图片

        :headers="uploadHeaders"  // 自定义请求头

        :on-change="changeFile"  //  文件 发生 改变

        :file-list="fileList"  //  文件数组

        :on-success="handleAvatarSuccess"  //  上传成功 

        :on-preview="handlePictureCardPreview"  //   图片预览 

      >

        <!--       :http-request="UploadImg" -->

        <!--        -->

        <i class="el-icon-plus"></i>

        <!-- <el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress> -->

      </el-upload>

<el-dialog :title="titleName" :visible.sync="dialogVisible">

        <img width="100%" :src="dialogImageUrl" alt="" />

      </el-dialog>

export default {

  components: {

    Title  //  自定义组件 

  },

  data() {

    return {

      titleName:'', //  弹层信息

      fileList: [], // 图片地址设置为数组

      remsgShow: "", //  记录上传id 判断 隐藏或者显示

      flieUser: {}, //  储存上传信息

      dialogImageUrl: "", //  图片地址

      file: "",

      uploadHeaders: {

        Authorization: sessionStorage.getItem("token")

      },

      dialogVisible: false //  控制 弹层 显示

    };

  },

  methods: {

    //  图片预览

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    changeFile(file, fileList) {

      this.fileList = fileList.map(item => item);

    },

    handleRemove(file) {

      //   将原来的文件给排除掉了 剩下的就是最新的数组了

      this.fileList = this.fileList.filter(item => item.uid !== file.uid);

      this.remsgShow = "";

    },

    handleAvatarSuccess(res,file) {

      console.log(file);

      if (res.recode == 200) {

        this.titleName = res.redata.businessName

        this.flieUser = res.redata;

        this.remsgShow = res.remsg;

      } else {

        this.$message.error(res.remsg);

      }

      console.log(res);

    },

    beforeUpload(file) {

      this.file = file;

      console.log(file);

      // 文件类型

      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];

      if (!types.includes(file.type)) {

        this.$message.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!");

        return false;

      }

      //  检查大小

      const maxSize = 5 * 1024 * 1024;

      if (maxSize < file.size) {

        this.$message.error("图片大小最大不能超过5M");

        return false;

      }

      // 已经确定当前上传的就是当前的这个file了

      this.currentFileUid = file.uid;

      return true;

    },

    //  实现自定义上传

    UploadImg() {

      // console.log(file.file.name);

      const Dates = new FormData();

      Dates.append("file", this.file);

      console.log(Dates);

      // yyzzRecognition(formData).then(res => {

      //   console.log(res);

      // });

    }

  },

  computed: {

    // 设定一个计算属性 判断是否已经上传完了一张

    fileComputed() {

      return this.fileList.length === 1;

    }

  }

};

/deep/.disabled .el-upload--picture-card {

  display: none;  //  计算隐藏显示 dom元素 需要 请用 

}