Aquí está el código directamente y puede probarlo usted mismo.
Aquí solo oculte el botón de carga después de cargar una foto. Si necesita cargar varias fotos, puede modificar el atributo de límite usted mismo.
<template>
<el-card class="card">
<el-upload
:class="{hide:hideUploadEdit}"
:headers="this.headers"
:action="this.url.fileUpload"
:on-preview="handlePicPreview"
:on-remove="handlePicRemove"
:on-success="handlePicSuccess"
:on-change="handlePicChange"
:file-list="fileList"
:limit="1"
list-type="picture-card">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-card>
</template>
<script>
import Vue from "vue";
import {
ACCESS_TOKEN} from "@/store/mutation-types"
export default {
name: "MachCheck",
data() {
return {
dialogImageUrl: '',
dialogVisible: false, // 大图预览框
hideUploadEdit: false, // 是否隐藏上传按钮
headers: {
},
fileList: [],
url: {
fileUpload: window._CONFIG['domianURL'] + "/sys/common/upload", // 上传地址
},
}
},
created() {
/* 获取token头信息 */
const token = Vue.ls.get(ACCESS_TOKEN);
this.headers = {
"X-Access-Token": token}
},
methods: {
/* 上传后和删除后都要判断是否隐藏 */
handlePicRemove(file, fileList) {
// 大于1张隐藏
this.hideUploadEdit = fileList.length >= 1
},
handlePicChange(file, fileList) {
// 大于1张隐藏
this.hideUploadEdit = fileList.length >= 1
},
handlePicPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handlePicSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
</style>
Antes de cargar:
Después de cargar:
consejo: Si tiene alguna pregunta o intercambios técnicos, agregue Penguin: 995062855. Indica tu venida