使用vue3+Element-Plus写一个图片上传 照片墙样式 代码加注释

好的，下面是使用 Vue3 + Element-Plus 写的图片上传和照片墙样式的代码，附有注释。

1. 首先，在组件中引入 Element-Plus 的 Upload 组件和 Image 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :show-file-list="false"
      :on-change="handleChange"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <div class="photo-wall">
      <el-image
        v-for="(item, index) in fileList"
        :key="index"
        :src="item.url"
        :preview-src-list="previewList"
        fit="cover"
        class="photo-item"
      ></el-image>
    </div>
  </div>
</template>

2. 在组件的 data 中定义 fileList 和 previewList 数组，用于存储上传的图片和预览图片的链接：

<script>
export default {
  data() {
    return {
      fileList: [], // 存储上传的图片
      previewList: [], // 存储预览图片的链接
    };
  },
};
</script>

3. 在组件的 methods 中定义 handleChange 方法，用于上传图片和更新 fileList 和 previewList 数组：

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 上传图片
      const formData = new FormData();
      formData.append("file", file.raw);
      // 这里的 action 可以根据实际情况修改
      axios.post("/api/upload", formData).then((res) => {
        const { data } = res;
        // 更新 fileList 和 previewList 数组
        this.fileList.push({ url: data.url });
        this.previewList.push(data.url);
      });
    },
  },
};
</script>

4. 在组件的 style 中定义上传按钮和照片墙的样式：

<style>
.upload-demo {
  display: inline-block;
}

.photo-wall {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.photo-item {
  width: 200px;
  height: 200px;
  margin: 10px;
}
</style>

注：这里的上传图片接口和样式仅供参考，需要根据实际情况进行修改。