el-upload上传多张图片传给后端相路径及修改和回显的逻辑

对于el-upload上传多张图片传给后端相路径及修改和回显的逻辑，可以按照以下步骤进行实现：

1. 在前端页面中，使用el-upload组件上传多张图片，并将上传的图片保存在一个数组中。

2. 在上传成功后的回调函数中，将上传成功的图片的信息（例如文件名、文件路径等）保存在一个数组中。

3. 将保存成功的图片信息数组通过ajax发送到后端。在后端中，根据图片路径和名称等信息，将图片保存到指定的文件夹中。

4. 对于需要修改图片的情况，可以在后端中提供一个接口，接收前端传来的修改请求，并根据图片的名称和路径等信息，找到对应的图片进行修改。

5. 对于需要回显图片的情况，可以在前端中将图片的路径保存在一个数组中，并将数组中的路径渲染到页面中，从而实现图片的回显。

需要注意的是，在上传和修改图片时，应该对文件进行重命名，以避免文件名重复的问题。同时，为了保证上传的图片能够正常显示，应该将图片保存在一个能够被访问的公共路径下。

相关问题

el-upload上传多张图片及修改和回显的逻辑

el-upload 组件可以方便地实现上传多张图片及修改和回显的逻辑。具体实现步骤如下：

1. 在 el-upload 组件中设置 multiple 属性为 true，以支持多张图片的上传。

<el-upload 
  action="your-upload-api-url"
  :multiple="true"
  :default-file-list="defaultFileList"
  :on-success="handleUploadSuccess"
>
  <el-button>
    点击上传
  </el-button>
</el-upload>

2. 在 data 中定义 defaultFileList 变量，用于存储上传成功后的图片列表。

data() {
  return {
    defaultFileList: []
  }
},

3. 在上传成功的回调函数 handleUploadSuccess 中，将上传成功后的图片信息加入到 defaultFileList 中。

handleUploadSuccess(response, file, fileList) {
  // 将上传成功后的图片信息加入到 defaultFileList 中
  this.defaultFileList.push({
    name: file.name,
    url: response.data.url
  });
},

4. 如果要实现修改图片的逻辑，可以在 el-upload 组件外添加一个图片预览组件，用于显示当前已上传的图片列表，并在点击某张图片时触发修改操作。

<el-image 
  v-for="(file, index) in defaultFileList" 
  :key="index"
  :src="file.url"
  :preview-src-list="defaultFileList.map(item => item.url)"
  @click.native="handleImageClick(index)"
>
</el-image>

5. 在 handleImageClick 方法中，根据点击的图片索引打开一个对话框或者弹出一个模态框，用于进行图片修改操作。

handleImageClick(index) {
  // 打开对话框或弹出模态框，进行图片修改操作
  // ...
},

6. 在修改图片成功后，更新 defaultFileList 中对应图片的信息。

handleImageEditSuccess(index, newFile) {
  // 更新 defaultFileList 中对应图片的信息
  this.defaultFileList.splice(index, 1, {
    name: newFile.name,
    url: newFile.url
  });
},

7. 如果需要回显已上传的图片列表，可以在组件挂载时调用一个获取图片列表的接口，并将返回的图片信息加入到 defaultFileList 中。

mounted() {
  // 获取已上传的图片列表，并将返回的图片信息加入到 defaultFileList 中
  // ...
},

以上是 el-upload 上传多张图片及修改和回显的逻辑实现方法，需要根据具体场景进行相应的调整和优化。

el-upload上传多张图片回显

以下是使用el-upload上传多张图片并回显的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :multiple="true"
    :limit="3"
    :file-list="fileList"
    list-type="picture-card"
    :auto-upload="false"
  >
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      // 在这里可以处理回显逻辑
      console.log(response); // 服务器返回的数据
      console.log(file); // 当前上传的文件对象
      console.log(fileList); // 已上传的文件列表
    }
  }
};
</script>

在上述代码中，我们使用了`el-upload`组件来实现文件上传功能。其中，`action`属性指定了上传文件的接口地址，`on-success`属性指定了上传成功后的回调函数。通过在回调函数中处理回显逻辑，可以实现上传多张图片并进行回显。