<template> <div class="app-container"> <el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px"> <el-form-item label="插入图片"> <el-upload class="avatar-uploader" :action="fileUpload" :headers="{ Authorization: token }" :show-file-list="false" :on-success="handleAvatarSuccess"> <img v-if="nextProjectForm.publicWelfareUrl" :src="nextProjectForm.publicWelfareUrl" class="avatar"/> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> </el-form> <el-button type="primary" @click="createData()">确定</el-button> </div> </template> <script> import { mapGetters } from "vuex"; export default { data() { return { nextProjectForm: { publicWelfareUrl: "", }, }; }, computed: { ...mapGetters(["fileUpload", "token"]) }, methods: { handleAvatarSuccess(response, file, fileList) { if (response && response.data && response.data.url) { this.$set(this.nextProjectForm, "publicWelfareUrl", response.data); } this.nextProjectForm.publicWelfareUrl=response.data }, //添加 async createData() { const params = this.nextProjectForm; alert(JSON.stringify(params)); }, } }; </script> <style lang='scss'> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>