1.dragUpdate 文件上传组件
<template><el-uploadref="uploadRef"action="#"v-bind="$attrs"drag:accept="accept":auto-upload="false":show-file-list='isNotLogo':on-change="handleUploadChange":on-remove="handleUploadRemove":on-exceed="onExceed":class="[isNotLogo ? 'drag-upload': 'logo-upload']"><div v-if='isNotLogo' class="el-upload__text"><d2-icon-svg :name="icon" /><h6>点击或将文件拖拽到这里上传</h6><p v-if="illustrate ">{{ illustrate }}</p></div><div><h6>点击或将文件拖拽到这里上传</h6><p>{{`支持扩展名：${accept}`}}</p></div></el-upload>
</template><script>
export default {name: 'DragUpdate',props: {accept: {type: String,default: ''},// 文件大小限制，单位为MfileSize: {type: Number,default: 20},value: {type: [Array, Object],default: null},icon: {type: String,default: 'drag-upload'},isNotLogo: {type: Boolean,default: true}},data() {return {file: null,fileName: ''}},computed: {illustrate() {const { accept, fileSize, $attrs } = thisconst info = [`支持扩展名：${accept}`,`单个文件最大支持${fileSize}Mb`]if ($attrs.limit) info.push(`最多可选${$attrs.limit}个文件`)return info.join('，')}},methods: {handleFileValidate(file, fileList) {const accept = this.accept.split(',')const size = this.fileSize * 1024 * 1024const name = file.nameconst format = name.substring(name.lastIndexOf('.'), name.length)if (!accept.some((val) => val === format)) {this.$message.error(`不支持 ${format} 格式的文件`)this.$refs.uploadRef.handleRemove(file)return false}if (file.size > size) {this.$message.error(`文件大小不能超过${this.fileSize}Mb`)this.$refs.uploadRef.handleRemove(file)return false}if (fileList.filter(item => item.name === file.name).length > 1) {this.$message.error(`"${file.name}"文件名重复'`)this.$refs.uploadRef.handleRemove(file)return false}return true},handleUploadChange(file, fileList) {if (!this.handleFileValidate(file, fileList)) returnthis.setValue(fileList)},handleUploadRemove(file, fileList) {this.setValue(fileList)},onExceed(files, fileList) {// 文件个数超出限制const { limit } = this.$attrsconst len = files.lengthconst olen = fileList.lengthif (limit && len + olen > limit) {const msg = `当前已选择${olen}个文件，还可选择${limit - olen}个文件`this.$message.error(olen ? msg : `最多可选${limit}个文件`)}},setValue(fileList) {fileList.forEach(item => {item.isUpload = true})const { limit } = this.$refs.uploadRefthis.file = [...fileList]if (limit === 1) this.file = fileList.length ? fileList[0] : nullthis.fileName = fileList.map(item => item.name).join(',')this.$emit('input', this.file)this.$emit('change', { file: this.file, fileName: this.fileName })}}
}
</script><style lang="scss" scoped>
.drag-upload {max-width: 600px;::v-deep {.el-upload-dragger {width: 600px;height: 192px;border-color: rgba(0,0,0,0.15);border-radius: 8px;&:hover {border-color: var(--theme-color, #409EFF);}svg {margin-top: 50px;font-size: 40px;}h6 {margin: 14px 0 4px;font-size: 16px;font-weight: 400;color: #262626;line-height: 24px;}p {font-size: 14px;color: #8C8C8C;line-height: 22px;padding: 0 10px;}}.el-upload-list__item {&:first-child {margin-top: 0;}&-name {color: #595959;}}}
}
.theme-tech {.drag-upload {::v-deep {.el-upload-dragger {border-color: rgba(0, 225, 228, 0.4);background-color: rgba(59, 139, 255, 0.1);&:hover {border-color: rgba(0, 225, 228, 1);}h6 {color: #fff;}p {color: #BFD9FF;}svg {color: #fff;}}.el-upload-list__item {&-name {color: #00AEFF;}}}}
}.logo-upload {::v-deep{.el-upload-dragger {width: auto;height: auto;padding: 0px 10px;}}
}
</style>
2.使用
<dragUpdate v-model="file" :key='num' :disabled="logoUrl !== ''|| imageUrl !== ''" accept=".jpg,.jpeg,.png,.gif" :isNotLogo='false' :file-size="50" :limit="1" @change="fileChange"></dragUpdate><div class='logo-info' v-if='imageUrl'><el-image :src="imageUrl" class='logo-img'></el-image><div class='logo-delete' @click='delLogo'><d2-icon-svg name="cancel" /></div></div>fileChange(fileInfo) {this.file = fileInfolet that = this;let file = fileInfo.file.raw;// this.imageUrl = URL.createObjectURL(file);var reader = new FileReader();reader.readAsDataURL(file);reader.onloadend = function(){// 将文件（file）转换成base64字符串that.imageUrl = reader.result;}},
3.base64 数据的展示
解释：el-image组件能直接展示base64的图片，不需要在做其他的处理
