手摸手教你实现vue上传图片-头像，只能上传一张且可重复替换！

vue结合element-ui实现上传头像图片

话不多说直接上图

. 初始化页面样式可更改哈

代码如下

<div style="position: relative;">
            <div style="height:36px;line-height:36px"><span style="color:red;margin-right:5px;">*</span>本体图标上传:</div>
            <div class="img-upload">
              <div v-if="isView" class="el-upload__text">
                <i class="el-icon-upload" />
                点击或拖拽，添加文件
              </div>
            </div>
            <div style="position: absolute;top:36px">
              <el-upload
                ref="upload"
                action="#"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                list-type="picture-card"
                :before-upload="beforeAvatarUpload"
                :file-list="fileList"
                :limit="1"
                :on-change="imgChange"
                :class="{hide:hideUpload}"
                :auto-upload="false"
              >
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  >
                  <i class="el-icon-success" />
                  <span class="imgsp1">上传成功！</span>
                  <span class="imgsp2" @click="handleRemove(file,fileList)">重新上传</span>
                </div>
              </el-upload>
            </div>
          </div>

> `fileList: [], // 上传的文件列表
      hideUpload: false,`
  


beforeAvatarUpload(file) { // 头像限制
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return (isJPG) && isLt2M
    },
    imgChange (files, fileList) { // 上传改变
      const formDataFile = new FormData()// 通过form数据格式来传
      formDataFile.append('file', files.raw) // 传文件
      uploadFile(formDataFile).then(res => {
        if (res.resp_code === 0) {
          this.isView = false
          this.formData.iconUrl = res.datas.url
          if (fileList.length > 0) {
            this.hideUpload = true
          } else {
            this.hideUpload = false
          }
        }
      })
    },
    ## css代码
::v-deep .el-upload-dragger{
    width: 290px;
    height: 54px;
  }
  ::v-deep .el-upload-dragger .el-icon-upload{
    font-size: 36px;
    margin: 0;
    margin-right: 14px;
    line-height: 0;
    vertical-align: middle;
  }
  .el-upload__text{
    line-height: 54px;
    text-align: center;
  }
  .el-upload__isView{
    line-height: 40px;
    padding: 8px;
    box-sizing: border-box;
    color: #999999;
    span{
      display: inline-block;
    }
    .sp1{
      width: 40px;
      height: 40px;
      margin-right: 34px;
      background: skyblue;
      border-radius: 6px 6px 6px 6px;
      img{
        width: 100%;
      }
    }
    .sp2{
      color: #1989FA;
    }
  }
  .hide ::v-deep .el-upload--picture-card{
      display: none;
  }
  .imgBig ::v-deep .el-dialog__headerbtn{
    top: 0;
  }
  .img-upload{
    width: 290px;
    height: 54px;
    border: 1px dashed #ccc;
    cursor: pointer;
    .el-icon-upload{
      font-size: 36px;
      vertical-align: middle;
      margin-right: 14px;
      color: #1989FA;
    }
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: 290px;
    height: 54px;
    padding: 6px 8px;
  }
  ::v-deep .el-upload--picture-card{
    width: 290px;
    height: 54px;
    padding: 8px;
    background-color: transparent;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 40px;
    height: 40px;
  }
  .el-icon-success{
    color: #15BE50;
    font-size: 20px;
    vertical-align: middle;
    margin-left: 34px;
  }
  .imgsp1{
    margin-left: 10px;
    color:#999;
  }
  .imgsp2{
    color: #1989FA;
    cursor: pointer;
  }
## 到此就全部完成了，看效果
![第一步](https://img-blog.csdnimg.cn/02b36eefe653481dac65435241f53c34.png#pic_center)

![第二步](https://img-blog.csdnimg.cn/be9e1fe9c62f44e780fb6df53bf2b791.png#pic_center)
![第三步](https://img-blog.csdnimg.cn/5e3181a37c36400595e6ad0c9d805106.png#pic_center)
## 完整效果在这里：

[video(video-2emHLzJy-1655187375197)(type-csdn)(url-https://live.csdn.net/v/embed/216261)(image-https://video-community.csdnimg.cn/vod-84deb4/b98c43062fd8440aa414e41e8ebcf594/snapshots/e98b525e8124449a87800ddd22f334f4-00002.jpg?auth_key=4808786210-0-0-a20953a6750fcc8ff5cc7294b6b83871)(title-上传头像)]