element-ui 上传多张图片并显示图片列表 / 修改时显示图片列表

本文链接：https://blog.csdn.net/Akatsuki233/article/details/98754165

本文介绍如何使用Element-UI实现多张图片上传，并在页面上展示上传后的图片列表。在编辑模式下，原有的图片列表也会正确显示。

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

template部分：

      <el-row class="searchForm">
        <el-col  :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item label="正文图片">
          <el-upload
            action="http://localhost:3001/upload/"
            list-type="picture-card"
            :with-credentials="true"
            :on-preview="handlePictureCardPreview"
            :on-success="uploadSuccess3"
            :on-remove="handleRemove"
            :file-list="formData.img">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="tip" class="uploadTip">注：建议尺寸：1200*420像素</div>
          </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

    <!-- 图片放大弹窗 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

js部分

data中：
   fileList: [],
   dialogImageUrl: '',
   dialogVisible: false,
   formData: {
     img: []  // 这里的必须是一个数组，才能正确回显，并且对象中要有name，url，uid
    }

methods中：
    // 正文图片上传回显
    uploadSuccess3 (res, file) {
      if (res.code === 200) {
        this.formData.img.push({name: res.data.pic, url: res.data.picUrl, uid: this.formData.img.length})
        console.log(this.formData.img)
      } else {
        this.$message.error(res.msg)
      }
    },
    // 正文图片上传,删除操作
    handleRemove (file, fileList) {
      // file是点击删除的文件，fileList时删除后剩下的文件列表
      this.formData.img = fileList
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }