<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;
},