一：upload 帶圖片預覽，刪除，和添加默認圖片
效果圖：（顯示默認圖片
上傳本地圖片（帶預覽和刪除按鈕）
預覽
<el-form-item label="文章封面"
prop="coverId">
<el-upload ref="field118"
:limit="1"
:action="upload.url"
accept=".png,.jpg,.gif"
list-type="picture-card"
:on-success="handleUploadSuccess"
:before-upload="handleBeforeUpload"
:on-error="handleUploadError"
:file-list="imgList"
:headers="upload.headers"
name="file"
:show-file-list="false"
style="display: inline-block; vertical-align: top">
<div class="el-upload__tip"
style="color: red"
slot="tip">
提示：僅允許上傳“jpg”，“png”，“gif"等格式文件，並且文件大小不能超過500k！
</div>
<el-image v-if="!logoUrl"
:src="logoUrl">
<div slot="error"
class="image-slot">
<i class="el-icon-plus" />
</div>
</el-image>
<div v-else>
<el-image :src="logoUrl"
:style="`width:146px;height:146px;`"
fit="fill" />
<div class="mask addmask">
<div class="actions">
<span title="預覽"
@click.stop="dialogVisibleTwo = true">
<i class="el-icon-zoom-in" />
</span>
<span title="移除"
@click.stop="removeImage">
<i class="el-icon-delete" />
</span>
</div>
</div>
</div>
</el-upload>
<!-- 預覽本地圖片 -->
<el-dialog :visible.sync="dialogVisibleTwo"
title="預覽"
width="800"
append-to-body>
<img :src="logoUrl"
style="display: block; max-width: 100%; margin: 0 auto;">
</el-dialog>
</el-form-item>
<script>
export default {
data(){
return{
upload: {
dialogVisibleTwo: false,
// 是否禁用上傳
isUploading: false,
// 設置上傳的請求頭部
headers: { Authorization: "Bearer " + getToken() },
// 上傳的地址
url: process.env.VUE_APP_BASE_API + "/common/upload",
},
imgList:[],
}
},
methods:{
// 圖片上傳
==================獲取到coverId,拿到圖片路徑回顯
handleUploadSuccess(res) {
this.$emit('input', res.url)
this.loading.close()
this.formData.coverId = res.fileId
this.logoUrl = process.env.VUE_APP_BASE_API + res.url
},
handleBeforeUpload() {
this.loading = this.$loading({
lock: true,
text: '上傳中',
background: 'rgba(0, 0, 0, 0.7)',
})
},
handleUploadError() {
this.$message({
type: 'error',
message: '上傳失敗',
})
this.loading.close()
},
// 圖片清空
=================注意
removeImage() {
this.logoUrl = ''
this.imgList=[]
this.formData.coverId=""
// this.$refs.field118.clearFiles()
},
}
</script>