这里就直接上代码了，亲测可以。
这里只弄了上传一张照片后隐藏上传按钮，如需上传多张，自行修改limit属性即可。
<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>
上传前：
上传后：
tip：如有问题或技术交流➕微：JavaBoy_1024，注明来意。
