图片上传组件

 <!-- 头像上传 -->
        <div class="uploader-wrapper">
          <el-upload
            class="avatar-uploader"
            :action="uploadFile.action" 
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="uploadFile.data" // 上传时附带的额外参数
          >
            <img v-if="editImageUrl" :src="editImageUrl" class="avatar">
            <template v-else>
              <i class="avatar-uploader-icon">
                <span class="el-icon-plus uploader-icon"></span>
                <br>支持jpg、jpeg、png、bmp格式，不要超过5M
              </i>
            </template>
          </el-upload>
          <a href="javascript:;" v-if="editImageUrl" class="deleteBtn" @click="deleteImg">
            <span class="iconfont iconshanchu1"></span>
          </a>
        </div>

// 图片上传
uploadFile: {
    action: "", //上传的路径
    options: {}, //签名的返回值
    url: "" //上传之后生成的url
}

   // 上传成功
    handleAvatarSuccess(res, file) {
      this.editImageUrl = this.uploadFile.url;
    },
   // 上传成功钱
    beforeAvatarUpload(file) {
      const typeList = ["image/jpeg","image/png", "image/bmp" , "image/jpg"] 
      const isJPG =typeList.includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5;
      
      console.log(file.type,isJPG)
      if (!isJPG) {
        this.$Message.error("上传头像图片只能是 JPG/JPEG/PNG/BMP 格式!");
      }
      if (!isLt2M) {
        this.$Message.error("上传头像图片大小不能超过 5MB!");
      }
      // return isJPG && isLt2M;
      if (isJPG && isLt2M) {
        // console.log('s',file)
        return new Promise((reslove, reject) => {
          this.fsSignature(reslove,file);
        });
      } else {
        return false;
      }
    },        
    // 上传请求
    async fsSignature(reslove,file) {
      let test = file.name.split('.')
      let key = test[0]+'-'+file.lastModified+'.'+test[1];
      this.$axios({
        url: 'https://hq-storage.hqjy.com/api/signMapLog/expert',
        method: 'post',
        header: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json;charset=UTF-8',
          'userToken': this.$factory.getcookiesInClient("token")
        },
        data: {
          dir:'hangjiaPC-notice/image',
          key,
        }
      }).then( res => {
          let data = res.data
          this.uploadFile.options = { ...data};
          console.log(this.uploadFile.options)
          this.uploadFile.action = data.host;
          this.uploadFile.data = {
            name: this.uploadFile.options.url.split("/").slice(-1),
            key:
              this.uploadFile.options.dir +
              this.uploadFile.options.url.split("/").slice(-1),
            policy: this.uploadFile.options.policy,
            OSSAccessKeyId: this.uploadFile.options.accessid,
            success_action_status: "200",
            callback: this.uploadFile.options.callback,
            signature: this.uploadFile.options.signature
          };
          this.uploadFile.url = this.uploadFile.options.url;
          console.log("1",this.uploadFile)
          reslove();
      });
    }

.uploader-wrapper {
      position: relative;
      width: 108px;
      &:hover .deleteBtn{
        display: block;
      }
      .deleteBtn {
        width: 32px;
        height: 28px;
        background-color: #f73f62;
        position: absolute;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        left: 78px;
        top: 0;
        display: none;
      }
    }

    .avatar-uploader {
        margin-top: 30px;
        .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          &:hover {
            border-color: #409eff;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 108px;
            height: 108px;
            //   line-height: 108px;
            line-height: 1.42;
            font-size: 12px;
            color: #6b7580;
            display: inline-block;
            text-align: center;
            background-color: #f5f7fa;
            .uploader-icon {
              margin-top: 10px;
              font-size: 22px;
            }
          }
          .avatar {
            width: 108px;
            height: 108px;
            display: block;
          }
        }
      }