el-upload上传单张图片

今天项目要实现图片单张上传功能，完善了很长时间，现在记录下

实现效果如下所示（不会上传gif，用几张图吧）

起始

 

 

 点击后出现上传选项然后选择要上传的图片，可以发现后面不会再显示多的上传选项

 

 

 其中也可以点击查看和删除

 

 

 当点击查看的时候会弹出dialog，当点击删除的时候已上传的图片会删掉，并再次出现要上传带+号的默认图片

这是点击查看的样式

 

 

 这是删除后的样式，可以发现又变了回来

 

 

 下面看下代码

template：

 <el-upload
                action=""
                :limit="1" //上传文件数
                :on-preview="handlePictureCardPreview"     //其余为el-upload自带的钩子函数，可上官网自行查看
                :on-change="handleChange"
                :on-progress="onProgress"
                :on-success="imgSuccess"
                :on-error="imgError"
                :http-request="uploadHttp"   //自定义上传方法
                list-type="picture-card"
                :on-remove="handleRemove"
                :class="{disabled:uploadDisabled}"   //用来控制上传后+号是否显示
                :file-list="fileList"
            >
            </el-upload>
。。。。。。

<el-dialog :modal-append-to-body="false" :visible.sync="imgVisible" width="30%">
  <img width="100%" :src="dialogImageUrl" alt="图片未找到"/>
</el-dialog>

这里定义了一个upload方法和一个dialog用来显示预览照片，注意这里有个坑，dialog一定要在外面，是相对于全局定义的

如果在el-upload里面定义了dialog会发现关闭了预览dialog后又会执行上传方法，来让你上传文件，

然后data里面声明

   return {
      //上传身份证正面相关参数
      limitCount: 1,
      uploadDisabled: false,
      // 是否显示预览图片
      imgVisible: false,
      // 预览图片url
      dialogImageUrl: "",
      fileList: [],
}

 methods方法中讲明

 onProgress(event, file, fileList) {this.uploadDisabled = false;
    },
    // 图片上传成功
    imgSuccess(response, file, fileList) {this.uploadDisabled = true;
    },
    // 图片上传失败
    imgError(err, file, fileList) {this.uploadDisabled = true;
    },
    // 预览图片
    handlePictureCardPreview() {
      this.imgVisible = true;
      this.uploadDisabled = true;
    },
    // 删除图片
    handleRemove(file, fileList) {
      this.uploadDisabled = false;
      // this.hideUpload = fileList.length >= this.limitCount;
    },
//图片更改
    handleChange(fileList) {
      this.uploadDisabled = fileList.length >= this.limitCount;
      this.uploadDisabled = true; 
    },

    uploadHttp(file) {  //定义上传方法
      let _this = this;
      //获取文件信息
      let fileLen = file.file;
      let name = fileLen.name
      let rand = this.calculate_object_name(name);  //把文件名变为随机数，也可以不更改，这里为了防止文件名重复
      client().multipartUpload(rand , fileLen).then(function (res) {  //调用阿里oss上传
        let str = res.res.requestUrls[0];
        _this.dialogImageUrl = 自有域名 + rand ;
        console.log(_this.dialogImageUrl);
      }).catch((err) => {
        console.log(err)
      })
    },

style中定义的css变量

.disabled .el-upload--picture-card {
  display: none;
}

.baseTheme .el-upload--picture-card {
  background-image: url("../../../../static/img/背景图片.png");
  background-position-x: center;  //背景图居中显示
  background-position-y: center;
  background-size: 100% 100%;    //背景图填充
  width: 190px;   //宽高可变
  height: 150px;
}

.baseTheme .el-upload-list--picture-card .el-upload-list__item {
  width: 190px;    //宽高与背景图一致
  height: 150px;
  position: inherit;

}

.baseTheme .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 190px;   //宽高与背景图一致
  height: 150px;
}