el-upload中filelist使用场景

el-upload中的file-list prop用于设置已上传文件列表，可以在上传文件时显示已上传的文件列表。当file-list prop发生变化时，el-upload组件会自动监听并更新已上传文件列表。同时，file-list prop也可以用于初始化已上传文件列表。

使用场景：
1.需要在上传文件时显示已上传的文件列表。
2.需要初始化已上传文件列表。

相关问题

如何用el-upload实现只下载不上传场景

`el-upload` 是 Element UI 中用于文件上传的一个组件，它默认提供的是上传文件的功能。然而，如果你想要实现只下载不上传的场景，你需要自定义一些行为来满足这个需求。

通常的做法是隐藏实际的上传按钮，并通过添加一个额外的按钮来触发下载操作。以下是实现这个场景的一个基本思路：

1. 使用 `el-upload` 组件，并将 `action` 属性设置为 `#`（一个无效的 URL），以禁用默认的上传行为。
2. 利用 `slot` 来自定义一个按钮，并为这个按钮添加点击事件处理函数，该函数将触发实际的下载操作。
3. 在点击事件中，你可以使用 JavaScript 的 `fetch` 或 `XMLHttpRequest` 来请求你的下载 URL，并触发浏览器的下载行为。

下面是一个简单的代码示例：

<template>
  <el-upload
    action="#"
    :auto-upload="false"
    :on-change="handleChange"
    style="display: none;"
  >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div slot="tip" class="el-upload__tip">点击选择文件</div>
  </el-upload>
  <el-button @click="handleDownload">下载文件</el-button>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 可以在这里添加一些处理逻辑，例如检查文件类型等
    },
    handleDownload() {
      // 假设你有一个后端提供的下载链接
      const downloadUrl = '你的下载链接';
      // 创建一个临时的a标签用于触发下载
      const tempAnchorNode = document.createElement('a');
      tempAnchorNode.style.display = 'none';
      document.body.appendChild(tempAnchorNode);
      tempAnchorNode.href = downloadUrl;
      tempAnchorNode.download = '';
      tempAnchorNode.click();
      document.body.removeChild(tempAnchorNode);
    }
  }
};
</script>

在这个示例中，用户通过点击“下载文件”按钮来触发下载，而不会上传任何文件。请注意，为了确保下载能够成功，你的下载 URL 应该是可直接访问的。

el-upload自定义

### Element-UI `el-upload` 组件自定义上传示例

#### 使用Element-UI的`el-upload`组件实现自定义上传功能

为了实现自定义上传，可以利用`el-upload`提供的`http-request`属性来自定义上传逻辑。下面展示了一个具体的实例，该实例展示了如何通过配置`el-upload`并结合天翼云OSS服务完成文件上传[^1]。

<template>
  <div class="upload-demo">
    <el-upload
      :action="''"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :http-request="customUpload"
      multiple
      :limit="3"
      :file-list="fileList">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeAvatarUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPGOrPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!');
      }
      return isJPGOrPNG && isLt500K;
    },
    customUpload(options) {
      let formData = new FormData();
      formData.append("file", options.file);

      // 假设这里有一个函数可以直接调用天翼云API进行上传操作
      uploadToTianyiCloud(formData).then(response => {
          console.log(`File uploaded successfully ${response}`);
          options.onSuccess(); // 成功回调
      }).catch(error => {
          console.error(`Error during uploading the file ${error.message}`);
          options.onError(); // 错误回调
      });
    }
  }
};
</script>

此代码片段实现了基本的文件验证以及与特定云端存储系统的交互过程。值得注意的是，在实际应用中需要替换`uploadToTianyiCloud()`为真实的接口请求处理逻辑，并确保按照目标平台的要求设置必要的参数和认证信息。

另外，对于更复杂的场景比如分片上传，则可能涉及到WebSocket或其他技术栈的支持，具体可参阅相关开源项目获取灵感[^3]。