Vue + elementUI使用 upload 上传组件在照片墙中进行照片回显(把数据库中的照片拿出来再显示)

本文链接：https://blog.youkuaiyun.com/AdminGuan/article/details/105431346

本文介绍在Vue项目中实现图片上传功能的方法，包括使用Element UI的el-upload组件进行图片上传、预览和移除操作，以及如何在form.vue页面中展示和编辑图片。文章详细展示了如何在index.vue页面将数据传输到form.vue页面，并在form.vue页面中实现图片的回显。

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

index.vue 页面

methods: {
  toEdit() { // 传输当前行数据到form.vue页面
    this.$refs.form.editOps(this.selections[0])
  }
}

form.vue 页面

<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="dialog" width="900px">
      <el-form :model="formData" size="small" :inline="true" label-width="110px">
        <el-form-item prop="issueUnit" label="照片">
          <el-upload
            :file-list="fileListImg"
            list-type="picture-card"
            :on-preview="showImg"
            :on-remove="removeImg">
            <i class="el-icon-plus"/>
          </el-upload>
          <el-dialog :visible.sync="imgDialogVisible" :append-to-body="true">
            <img width="100%" :src="this.formData.img">
          </el-dialog>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: false, formData: {},
      imgDialogVisible: false, fileListImg: [], urlObjImg: {}
    }
  },
  methods: {
    removeImg(file, fileList) { // 移除图片
      console.log(file, fileList)
    },
    showImg(res) { // 查看大图
      this.imgDialogVisible = true
      this.formData.img = res.url
    },
    editOps(data) { // 得到index.vue传过来的数据
      this.fileListImg = [] // 清空fileListImg的数据
      this.dialog = true
      this.formData = { ...data } // 把传过来的数据赋给formData
      this.formData.imgs.split(';').forEach(val => { // 通过遍历得到数据库中的照片并进行照片回显
        this.urlObjImg.url = val
        this.fileListImg.push(this.urlObjImg) // 把数据库中的照片添加到fileListImg里面
      })
    }
  }
}
</script>