Skip to content

Upload 组件支持自定义文件预览逻辑 #1117

@robinWongM

Description

@robinWongM
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

与 React 版同步,为 ant-design-vue 的 Upload 组件增加 previewFile API(React 版 3.17.0 )

What does the proposed API look like?

<template>
  <a-upload
    action="//jsonplaceholder.typicode.com/posts/"
    listType="picture-card"
    :previewFile="previewFile"
  >
    <div>
      <a-icon type="plus" />
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>

<script>
export default {
  methods: {
    previewFile(file) {
      console.log('Your upload file:', file);
      // Your process logic. Here we just mock to the same file
      return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
        method: 'POST',
        body: file,
      })
        .then(res => res.json())
        .then(({ thumbnail }) => thumbnail);
    },
  },
};
</script>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions