<template><div><el-form ref="shareFormRef" :model="form" label-width="100px" size="mini"><el-form-item label="分享标题"><el-input v-model="form.title"></el-input></el-form-item><el-form-item label="分享内容"><el-input v-model="form.content"></el-input></el-form-item><el-form-item label="分享图标"><el-uploadv-show="hideUpload"action="/posts/"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="handleRemove":http-request="upload":before-upload="beforeUpload":on-change="onChange":limit="limitCount"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，单个文件小于300kb</div></el-upload><ul class="el-upload-list el-upload-list--picture-card" v-show="hideUpload === false"><li class="el-upload-list__item is-ready"><img:src="dialogImageUrl"alt=""class="el-upload-list__item-thumbnail"/><a href="" class="el-upload-list__item-name"><i class="el-icon-document"></i></a><label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label><i class="el-icon-close"></i><i class="el-icon-close-tip"></i><span class="el-upload-list__item-actions"><span class="el-upload-list__item-preview" @click="previewImg"><i class="el-icon-zoom-in"></i></span><span class="el-upload-list__item-delete" @click="deleteImg"><i class="el-icon-delete"></i></span></span></li></ul><el-dialog :visible.sync="dialogVisible" :append-to-body="true"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></el-form-item></el-form></div></template><script>export default {name: 'shareConfig',props: {form: {type: Object,default: () => {}}},data() {return {dialogImageUrl: '',dialogVisible: false,limitCount: 1,hideUpload: true}},methods: {// 预览图片previewImg() {this.dialogVisible = true},// 删除图片deleteImg() {this.dialogImageUrl = ''},upload() {},onChange(file, fileList) {if (fileList.length >= this.limitCount){this.hideUpload = false}this.getBase64(file.raw).then(res => {const params = res.split(',')console.log(params, 'params')if (params.length > 0) {this.dialogImageUrl = params[0] + ',' + params[1]}})},beforeUpload(file) {},handleRemove(file, fileList) {console.log(file, fileList)},handlePictureCardPreview(file) {this.dialogImageUrl = file.urlthis.dialogVisible = true},// 获取图片转base64getBase64(file) {return new Promise(function(resolve, reject) {const reader = new FileReader()let imgResult = ''reader.readAsDataURL(file)reader.onload = function() {imgResult = reader.result}reader.onerror = function(error) {reject(error)}reader.onloadend = function() {resolve(imgResult)}})}}}</script><style scoped></style>
上传之前
上传之后右边上传组件隐藏
