Недавно я столкнулся с необходимостью отображать изображения на основе компонента загрузки vue3+element plus. Обычно мы просто отображаем URL-адрес, непосредственно возвращаемый серверной частью, и пример также приведен в элементе plus:
Однако, о_О, мы собираемся заполнить его в форме base64. На самом деле это очень просто. Просто создайте такой объект самостоятельно. Поместите нашу строку base64 в URL-адрес, а затем создайте другие вещи. Смотрите мою реализацию ниже. пример:
let fileList = ref([
{
// Это имя файла
name: «Имя файла 1»,
// Вот пользовательские атрибуты, которые я определил сам (необязательно).
fileId: '1',
// Вот base64нит, хм, формат, возвращаемый нашим бэкэндом, немного особенный, поэтому я снова преобразовал его, чтобы он стал настоящим base64нитом.
url: 'data:image/png;base64,' + new BaseTool().arrayBufferToBase64(temp?.arrayBuffer)
}
])
<el-upload
action="#"
list-type="picture-card"
v-model:file-list="fileList"
:auto-upload="false"
>
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file, item.dataValue)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
Ключевым моментом является замена приведенного выше списка файлов.
ХОРОШО.