element upload 上传多个附件 :upload-success 回显附件上传到服务器id

element upload是一个前端组件，用于实现文件上传。它提供了上传单个或多个附件的功能。当上传成功后，组件会返回回显信息，其中包括附件上传到服务器的id。

上传多个附件时，我们可以利用element upload组件的多选选项，支持用户在一个上传框中同时选择多个文件进行上传，便于用户批量上传附件。

在上传成功后，我们可以取出回显信息中的id值，利用这个id值，我们就可以在后端进行相关操作，如文件存储和获取等。

总之，element upload 是一个非常便利的上传组件，它为用户提供了方便快捷的文件上传方式，并且提供了回显信息，让开发者可以更加灵活地处理上传文件的相关操作。

相关问题

使用<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>实现上传功能并回显图片

这段代码使用了 Element UI 的 el-upload 组件来实现上传功能并回显图片。其中，action 属性指定了上传文件的地址，:show-file-list="false" 表示不显示上传文件列表，:on-success="handleAvatarSuccess" 表示上传成功后的回调函数，:before-upload="beforeAvatarUpload" 表示上传前的回调函数。

在 data 中定义了 imageUrl 变量来保存上传成功后的图片地址。

handleAvatarSuccess 函数会在上传成功后被调用，将上传成功后的图片地址赋值给 imageUrl 变量，以便在页面上回显图片。

beforeAvatarUpload 函数会在上传之前被调用，用于校验上传文件的类型和大小。

完整的代码如下：

<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    }
  }
};
</script>

el-upload上传回显本地文件，不用上传到服务器获取本地路径

在使用Element UI的`el-upload`组件时，如果你想显示已上传文件的本地路径，而不是实际上传到服务器，可以在文件上传成功后立即从本地读取文件并显示路径。这里是一个基本示例：

首先，在`el-upload`的`on-success`回调函数中，你可以得到上传成功的`file`对象。然后，你可以使用`URL.createObjectURL()`创建一个指向文件的临时URL，这可以用来展示文件名或预览图片。

<template>
  <el-upload
    :action=""
    list-type="picture"
    :on-success="handleSuccess"
    multiple
  >
    <el-button>点击上传</el-button>
  </el-upload>

  <div v-if="files.length">
    <ul>
      <li v-for="(file, index) in files" :key="index">
        <img :src="url(file)" :alt="file.name" style="width: 100px;">
        文件路径：{{ file.path }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: [],
      url(file) {
        return URL.createObjectURL(file);
      },
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.files.push({
        path: file.originPath, // 假设originPath存在并且是文件的原始本地路径
        name: file.name,
      });
    },
  },
};
</script>

请注意，`originPath`在这里假设是`el-upload`插件提供的文件的原始本地路径，具体实现可能会因插件的不同而有所差异。如果`originPath`不存在，你需要另外找到一种方式来获取文件的真实本地位置。