使用elementui中的el-upload，让上传的图片列表和上传控件并列在同一行

在 Element UI 中，el-upload 组件提供了上传文件的功能。如果你希望上传的图片列表和上传控件并列在同一行，可以使用一些 CSS 技巧来实现这个布局。具体来说，可以利用 flexbox 布局来实现这个需求。

示例代码

以下是一个示例，展示了如何将上传控件和上传的图片列表并列一行：

html
复制代码
<template>
  <div>
    <el-form :model="form">
      <el-form-item label="Upload Images">
        <div class="upload-container">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :on-success="handleSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="image-list">
            <el-image
              v-for="(item, index) in fileList"
              :key="index"
              :src="item.url"
              class="uploaded-image"
              fit="cover"
            />
          </div>
        </div>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList.map((file) => {
        if (file.url) return file;
        return {
          name: file.name,
          url: URL.createObjectURL(file.raw),
        };
      });
    },
  },
};
</script>

<style>
.upload-container {
  display: flex;
  align-items: flex-start;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: 20px; /* 控制上传控件和图片列表之间的间距 */
}

.uploaded-image {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>

解释

1. 布局容器：

   • 使用一个 div 容器，类名为 upload-container，作为上传控件和图片列表的父容器。
   • upload-container 使用 flexbox 布局，将子元素（上传控件和图片列表）并列排列。

2. 上传控件：

   • el-upload 组件用于文件上传，配置 list-type="picture-card" 以便显示上传控件为卡片风格。
   • action 属性设置上传的目标 URL。
   • on-preview、on-remove、on-success 等事件处理函数用于处理文件预览、移除和上传成功的逻辑。

3. 图片列表：

   • image-list 使用 flexbox 布局，将图片并列显示。
   • v-for 指令用于循环显示 fileList 数组中的图片。
   • el-image 组件用于显示图片，并配置 fit="cover" 使图片填充容器。

4. 样式：

   • .upload-container 使用 flexbox 布局和 align-items: flex-start 使上传控件和图片列表并列对齐。
   • .image-list 使用 flex-wrap: wrap 允许图片列表在空间不足时换行，并设置 gap 控制图片间的间距。
   • .uploaded-image 设置图片大小、边框和圆角。

总结

通过使用 flexbox 布局，将上传控件和图片列表放在同一容器中，并调整样式，可以实现并列一行的效果。这种布局方式可以根据需要灵活调整控件和图片列表之间的间距和对齐方式。