el-upload实现上传头像

1.

<template>
   <el-upload
       :action="uploadFileUrl"
        list-type="picture-card"
       :on-preview="handlePictureCardPreview"
       ref="uploadimgs"
       :on-remove="handleRemove"
       :class="{hide:iconUploadShow}"
       :on-change="handleImgChange"
       :on-success="handleUploadSuccess"
       multiple
       :limit="limit"
       :on-exceed="handleExceed"
       :before-upload="handleBeforeUpload">
      <img v-if="plusDialog==false" width="100%" :src="form.photo" alt="" @click="plusDialog=true">
      <i v-else   class="el-icon-plus"></i>
  </el-upload>
</template>
<script>
 export default{
   data(){
   return{
    uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
    fileType: ["bmp", "gif", "jpg", "jpeg", "png"],
    limit:1,
    }
  },
  methods:{
      handlePictureCardPreview(file) {
        this.form.photo = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file, fileList) {
        // let arr = this.fileList
        // let newarr = []
        // for (let item of arr) {
        //   if (file.response.url != item.file_url) {
        //     newarr.push(item)
        //   }
        // }
        // this.fileList = newarr
        // if (fileList.length == 0) {
        //   this.iconUploadShow = false
        // }
      },
      handleImgChange(file, fileList) {
        if (fileList.length >= this.limit) {
          this.iconUploadShow = true
        }
      },
      handleUploadSuccess(res) {
        this.fileList.push({
          file_name: res.fileName,
          name: res.name,
          file_url: res.url,
          type: res.type,
          file_size: res.size
        });
        this.form.photo = this.fileList[0].file_url
        console.log(this.fileList)
        this.$message.success('上传成功!')
        console.log(res)
      },
      handleExceed(files, fileList) {
        this.$message.error("上传数量超过限制");
      },
      
  }
 }
 
</script>