el-upload 单张图片上传

<el-upload :action="uploadAction" list-type="picture-card" limit="1" name="file" :on-error="handleError"
                    :on-success="handleSuccess" :headers="uploadHeader" :file-list="imgList"
                    :disabled="$route.params.id == '1'">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions" v-if="$route.params.id != '1'">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
</el-upload>
<el-dialog :visible.sync="dialogImgVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

 data() {
      return {
            uploadAction: getApiBaseUrl() + '/upLoadFile/param/uploadExample',
            uploadHeader: {
                "Authorization": localStorage.getItem("gToken"),
            },
            imgList: [],//图片的信息
            imgUrl: '',//需要保存的图片名称
            dialogImageUrl: '',//图片预览路径
      }
 }

 //上传图片失败
        handleError(err, file, fileList) {
            this.$message.error("上传失败");
        },
        //上传图片成功
        handleSuccess(res, file, fileList) {
            console.debug('上传成功===', res)
            console.debug('上传成功===', file)
            console.debug('上传成功===', fileList)
            if (file.code == 0) this.imgUrl = res.data.imgUrl
            if (fileList.length > 0) {
                document.getElementsByClassName('el-upload--picture-card')[0].style.display = "none"
            }
        },
        //删除图片
        handleRemove(file) {
            console.debug('删除图片====', file);
            this.imgList = []
            this.imgUrl = ''
            if (this.imgList.length == 0) {
                document.getElementsByClassName('el-upload--picture-card')[0].style.display = "inline-block"
            }
        },
        //预览图片
        handlePictureCardPreview(file) {
            console.debug('预览图片====', file);
            this.dialogImageUrl = file.url;
            this.dialogImgVisible = true;
        },