表单上传多个图片可回显图片

当你使用表单上传多个图片时，可以通过以下方式回显图片：

1. 在前端将上传的图片以 base64 编码的形式保存起来，然后通过 `img` 标签的 `src` 属性将其显示出来。

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileUpload">
    <button @click="submitForm">提交表单</button>
    <div v-for="(file, index) in files" :key="index">
      <img :src="file.url" alt="上传的图片">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 存放上传的文件
    }
  },
  methods: {
    handleFileUpload() {
      this.files = Array.from(this.$refs.fileInput.files)
      this.files.forEach(file => {
        this.getBase64(file)
        .then(url => {
          // 将 base64 编码的图片保存起来
          file.url = url
        })
      })
    },
    submitForm() {
      const formData = new FormData()
      this.files.forEach(file => {
        formData.append('images', file)
      })
      // 将 formData 发送到后端处理
      // ...
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
      })
    },
  },
}
</script>

2. 在后端处理完上传的图片后，将图片的 URL 发送给前端，然后在前端将其显示出来。

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileUpload">
    <button @click="submitForm">提交表单</button>
    <div v-for="(file, index) in files" :key="index">
      <img :src="file.url" alt="上传的图片">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [], // 存放上传的文件
    }
  },
  methods: {
    handleFileUpload() {
      this.files = Array.from(this.$refs.fileInput.files)
    },
    submitForm() {
      const formData = new FormData()
      this.files.forEach(file => {
        formData.append('images', file)
      })
      axios.post('/upload', formData)
      .then(response => {
        // 后端返回的图片 URL 数组
        const urls = response.data.urls
        urls.forEach((url, index) => {
          // 将图片的 URL 保存到对应的文件对象中
          this.files[index].url = url
        })
      })
    },
  },
}
</script>

以上是两种常见的回显图片的方式，你可以根据自己的需求进行相应的修改。