点击图片可可以实现上传
<template> <div> <a-upload class="avatar-uploader" :showUploadList="false" :beforeUpload="beforeUpload" listType="picture-card" action="/amo/dist/picUpload" :headers="headers" @change="handleChange" > <img v-if="imageUrl" :src="imageUrl" alt="avatar" width="128" height="128" /> <div v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <div class="ant-upload-text">Upload</div> </div> </a-upload> </div> </template> <script> import { retriveMyDetail } from "@/api/information"; export default { data() { return { loading: false, imageUrl: "", headers: { Authorization: "Bearer" + this.$store.state.user.token } }; }, created() { this.getTableList(); }, methods: { getTableList() { this.spinning = false; retriveMyDetail().then(res => { this.imageUrl = res.data.qualificationPic1; }); }, handleChange(info) { if (info.file.status === "uploading") { this.loading = true; return; } if (info.file.status === "done") { this.imageUrl = info.file.response.data[0].filePath; this.loading = false; } }, //上传文件之前的钩子,参数为上传的文件,若返回 false 则停止上传。 beforeUpload(file) { const isJPG = file.type === "image/jpeg"; //判断上传文件格式 if (!isJPG) { this.$message.error("You can only upload JPG file!"); } const isLt2M = file.size / 1024 / 1024 < 5; //计算上传文件的大小 if (!isLt2M) { this.$message.error("Image must smaller than 5MB!"); } return isJPG && isLt2M; } } }; </script> <style> .avatar-uploader > .ant-upload { width: 128px; height: 128px; } .ant-upload-select-picture-card i { font-size: 32px; color: #999; } .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; } </style>