el-upload上传多个图片,但图片是一样的

您好，我明白了您的问题。如果您使用的是 Element UI 中的 el-upload 组件上传多个图片，但是这些图片都是相同的，那么您可以考虑在上传之前对这些图片进行处理，使它们变得不同。

一种简单的方法是在每张图片的文件名中加入一个随机数或时间戳，这样就能确保每张图片的文件名都不同了。具体的做法可以参考以下代码：

// 定义一个生成随机数的函数
function getRandomNum() {
  return Math.floor(Math.random() * 100000);
}

// 修改上传组件的文件名
<el-upload
  action="/upload"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :file-list="fileList"
  :name="`file_${getRandomNum()}`" // 在文件名中加入随机数
  multiple
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button slot="tip" type="text">只能上传jpg/png文件，且不超过500kb</el-button>
</el-upload>

这样就能确保每张图片的文件名都不同了，从而避免上传多个相同的图片。希望对您有所帮助。

相关问题

el-upload上传多张图片

要使用`el-upload`组件上传多张图片，您可以使用`multiple`属性并将其设置为`true`。这将允许用户选择并上传多个文件。

以下是一个示例代码，演示如何使用`el-upload`上传多张图片：

<template>
  <el-upload
    action="/upload"
    :multiple="true"
    :on-success="handleUploadSuccess"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleUploadSuccess(response, file, fileList) {
      // 上传成功的回调函数
      console.log(response, file, fileList);
    },
    handleRemove(file, fileList) {
      // 移除文件的回调函数
      console.log(file, fileList);
    }
  }
}
</script>

在上面的示例中，我们设置了`action`属性为`/upload`，这是文件上传的接口地址。通过设置`:multiple="true"`，我们允许用户选择多个文件进行上传。在成功上传后，会触发`handleUploadSuccess`方法，并将响应、当前上传的文件和文件列表作为参数传递给该方法。同样地，当用户移除某个文件时，会触发`handleRemove`方法，并将被移除的文件和更新后的文件列表作为参数传递给该方法。

您可以根据您的需求修改上传的接口地址和回调函数的逻辑。希望这可以帮助到您！如果您还有其他问题，请随时提问。

vue3 el-upload上传多张图片

以下是使用Vue3的el-upload组件上传多张图片的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    multiple
    :limit="3"
    :auto-upload="false"
    :file-list="fileList"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      if (!isLt500K) {
        this.$message.error('文件大小不能超过500kb');
      }

      return isJPG && isLt500K;
    };

    const handleSuccess = (response, file) => {
      this.$message.success('上传成功');      // 处理上传成功后的逻辑
    };

    return {
      fileList,
      beforeUpload,
      handleSuccess,
    };
  },
};
</script>

在上述代码中，我们使用了Vue3的`ref`函数来创建了一个响应式的`fileList`数组，于存储上传的文件列表。`beforeUpload`函数用于在上传之前进行文件类型和大小的校验，只有符合要求的文件才会被上传。`handleSuccess`函数用于处理上传成功后的逻辑，你可以在其中进行图片压缩和合并为zip文件的操作。

请注意，上述代码中的`action`属性需要根据你的实际情况进行修改，以指定上传文件的接口地址。