项目中上传图片使用的图片素材库组件_filelibrary 素材库组件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44770377/article/details/104845921

本文介绍如何在项目中创建一个用于上传图片并管理图片素材库的组件。通过在components文件夹下建立子组件，并将接口替换为实际的后台接口，可以轻松实现图片上传功能。示例效果可在管理闪屏商品的新增商品图片功能中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在components文件中新建一个子组件，文件的所有代码如下：在这里插入图片描述

<template>
  <div v-if="type == 'image'">
    <!--图片列表，value是完整url数组-->
    <ul class="el-upload-list el-upload-list--picture-card" v-for="(item,index) in value" :key="index">
      <li tabindex="0" class="el-upload-list__item is-ready" :style="'width: '+width+'px;height: '+height+'px'">
        <div>
          <img :src="item" alt="" class="el-upload-list__item-thumbnail">
          <span class="el-upload-list__item-actions">
            <!--向左排序-->
            <span class="el-upload-list__item-preview" v-if="index != 0" @click="moveMaterial(index,'up')">
              <i class="el-icon-back"></i>
            </span>
            <!--查看大图-->
            <span class="el-upload-list__item-preview" @click="zoomMaterial(index)">
              <i class="el-icon-view"></i>
            </span>
            <!--删除-->
            <span class="el-upload-list__item-delete" @click="deleteMaterial(index)">
              <i class="el-icon-delete"></i>
            </span>
            <!--向后排序-->
            <span class="el-upload-list__item-preview" v-if="index != value.length-1" @click="moveMaterial(index,'down')">
              <i class="el-icon-right"></i>
            </span>
          </span>
        </div>
      </li>
    </ul>
    <!--上传图片的+按钮显示与否，数量够即不显示-->
    <div tabindex="0" v-if="num > value.length" @click="toSeleteMaterial" class="el-upload el-upload--picture-card" :style="'width: '+width+'px;height: '+height+'px;'+'line-height:'+height+'px;'">
      <i class="el-icon-plus"></i>
    </div>

    <!--点击查看大图的弹窗-->
    <el-dialog append-to-body :visible.sync="dialogVisible" width="35%">
      <img :src="url" alt="" style="width: 100%">
    </el-dialog>

    <!--图片素材库弹窗-->
    <el-dialog :title="$t('rf_material.picLibrary')" append-to-body :visible.sync="listDialogVisible" width="70%">
      <el-container>
        <!--左侧分组-->
        <el-aside width="unset">
          <!--添加分组-->
          <div style="margin-bottom: 10px">
            <el-button class="el-icon-plus" size="small" @click="materialgroupAdd()">{
  {$t('rf_material.addGroup')}}</el-button>
          </div>
          <!--标签页-->
          <el-tabs tab-position="left" v-model="materialgroupObjId" v-loading="materialgroupLoading" @tab-click="tabClick">
            <el-tab-pane v-for="(item,index) in materialgroupList" :key="index" :name="item.id">
              <span slot="label"> {
  {item.name}}</span>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <!--右侧卡片-->
        <el-main>
          &l