ElementUI上传组件扩展--重新上传

最新推荐文章于 2024-06-19 11:34:46 发布

小生姜Yasin

最新推荐文章于 2024-06-19 11:34:46 发布

阅读量2.8k

点赞数

分类专栏：技术文章标签： ElementUI 上传组件前端重新上传

本文链接：https://blog.csdn.net/JiangYuXuan1994/article/details/97373090

版权

本文针对ElementUI的上传组件在多图片上传后无法更改图片顺序的问题，介绍了如何重新封装upload组件以实现图片的替换上传功能。通过封装组件代码，可以在添加和编辑页面中灵活使用，支持用户头像的替换上传，并提供了组件使用示例和实际效果展示。

摘要由CSDN通过智能技术生成

前言：在做商城类后台时，避免不了需要使用图片上传组件，然而如果你使用了elementUI，那么恭喜你，你将不能处理，多图片上传后更改其中图片顺序问题，elementUI提供的照片墙和文件缩略图都未提供重新替换上传的功能，然而，用户头像上传可以替换上传但仅限上传一张图片！

为解决这个问题，只能重新封装elementUI的upload组件

直接上组件代码

<template>
  <div id="uploader_box">
    <div class="uploader_item" v-for="(item,index) in tempImgs" :key="index">
      <img :src="item" class="avatar" />
      <label class="uploader_item_status">
        <i class="el-icon-upload-success el-icon-check"></i>
      </label>
      <div class="uploader_icon">
        <span class="uploader_icon_item">
          <el-upload
            class="reupload_icon"
            :action="reqUrl"
            :show-file-list="false"
            :on-success="reUploadSucc"
            :before-upload="reBefoUpload"
          >
          <i slot="trigger" @click="getIndex(index)" class="el-icon-upload2"></i>
          </el-upload>
        </span>
        <span class="uploader_icon_item" style="margin-left:10px;" @click="previewImage(index)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span class="uploader_icon_item" style="margin-left:10px;" @click="deleteImage(index)">
          <i class="el-icon-delete&#