本文主要是介绍el-upload单张图片上传回显替换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<el-form :model="bulletin" ref="bulletin" label-width="90px"><el-form-item label="头像："><el-upload class="upload-demo upload"drag:show-file-list="false":action="uploadFilePath":data="activeCoverPhoto":before-upload="beforeUpload":on-success="activeCoverPhotoUploadSuccess"><i v-if="!bulletin.cover" class="el-icon-upload"></i><div v-if="!bulletin.cover" class="el-upload__text">仅支持JPG/PNG，小于2M</div><img :src="getImgUrl(bulletin.cover)" alt="" style="width:100%;height:100%" v-if="bulletin.cover"></el-upload></el-form-item></el-form>
// 上传图片携带数据activeCoverPhoto: {type: 40,description: '杂志封面图'},// 图片上传成功返回图片路径activeCoverPhotoImgUrl: '',
import { mapGetters } from 'vuex'
import { getImgUrl } from '@/utils'
computed: {...mapGetters(['uploadFilePath'])},
//封面开始getImgUrl (uuid) {return getImgUrl(uuid)},//图片beforeUpload (file) {const isType = file.type === 'image/jpeg' || file.type === 'image/png'const isLt2M = file.size / 1024 / 1024 < 2if (!isType) {this.$message.error('图片只能是 JPG/PNG 格式')}if (!isLt2M) {this.$message.error('图片大小不能超过 2MB')}return isType && isLt2M},activeCoverPhotoUploadSuccess (response, file, fileList) {this.bulletin.cover = response.datathis.activeCoverPhotoImgUrl = URL.createObjectURL(file.raw)},
这篇关于el-upload单张图片上传回显替换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
