前端基础学习-多张图片上传，通过设置封面改变图片排序

最新推荐文章于 2025-03-20 16:56:14 发布

小夭。

最新推荐文章于 2025-03-20 16:56:14 发布

阅读量601

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_47146037/article/details/115727729

版权

本文介绍如何在前端使用Element-UI实现多张图片上传，并提供设置封面和删除图片的功能，从而动态调整图片排序。当设置某图作为封面或删除图片时，系统会自动更新图片顺序。

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

在element-ui上传多张图片的基础上通过对其设置封面与删除的功能可以改变图片的排序
在这里插入图片描述
点击设置为封面后

图片顺序成功改变

其中也可以对图片进行删除操作，如果删除的为封面，则封面标识会在下一张图片出现

另外我这里设置了上传的最大数量，在代码中可以看到

代码部分
这个上传图片的功能我放在了表单当中，这里我只展示多张图片的相关代码

html

	el-form :model="filterForm" ref="filterForm" :rules="filterRules">
		<el-form-item label="多张图片:"
                  label-width="100px">
            <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :limit="limit"
                        :show-file-list="true"
                        accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                        :on-change="handleLimit"
                        :file-list="fileList"
                        :class="{ disabled: uploadDisabled }"
                        :auto-upload="false"
                        style="position:relative">
              <i slot="default"
                  class="el-icon-plus"></i>
              <div slot="file"
                    slot-scope="{ file }"
                    style="position:absolute;width:100%;height:100%;">
                <div class="fmDivCls"
                      v-if="file.isCover === '1'">
                  <span class="uploadSpan">封面</span>
                </div>
                <img class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt />
                <span class

最低0.47元/天解锁文章