这里就直接上代码了,亲测可以。
这里只弄了上传一张照片后隐藏上传按钮,如需上传多张,自行修改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,注明来意。