Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upload component filelist, open an empty tab when click a item when url is base64 #5388

Closed
flyingfishzxf opened this issue Nov 17, 2023 · 2 comments
Labels
untriaged need to sort

Comments

@flyingfishzxf
Copy link

TuSimple/naive-ui version (版本)

2.35.0

Vue version (Vue 版本)

3.2.36

Browser and its version (浏览器及其版本)

Chrome(119.0.6045.159)

System and its version (系统及其版本)

Windows11Pro(22H2)

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/eloquent-cdn-svvmzj

Reappearance steps (重现步骤)

打开示例
https://codesandbox.io/s/eloquent-cdn-svvmzj
点击列表第三个图片,我已经把图片由 url 替换成了 base64
直接点击会打开个空白标签页,而不是打开这个图片
如果使用右键->在新标签页打开,而可以正常打开图片,下载按钮也可以正常下载

Expected results (期望的结果)

希望当文件列表中 url 为 base64 且文件名可点击时(绿色且鼠标hover时是小手图标),可以在新标签页打开预览该文件,或者可以下载此文件(像后面的下载按钮一样)

Actual results (实际的结果)

打开的是一个空白的新标签页,控制台提示:“Not allowed to navigate top frame to data URL”

Remarks (补充说明)

因为我们项目中从服务器取得的文件形式都是 base64 格式的,在 upload 组件点击文件名时,发现无法直接打开预览文件,试了一下文档中的例子,发现也是不行的,希望可以解决一下这个问题,谢谢

@github-actions github-actions bot added the untriaged need to sort label Nov 17, 2023
@flyingfishzxf flyingfishzxf changed the title Upload component filelist, open an empty tab when click a item which url is base64 Upload component filelist, open an empty tab when click a item when url is base64 Nov 17, 2023
@jizai1125
Copy link
Contributor

jizai1125 commented Nov 21, 2023

如果 UploadFileInfo 的 status 不为 error 且设置了 url,那么就会渲染为一个 a 标签来导航,报错是因为出于安全原因,禁止从页面打开 Data URI 网址。Blocking Top-Level Navigations to data URLs
解决方法:自己实现 fileList 组件,或者 UploadFileInfo 中不设置 url,只通过下载按钮来下载文件,然后在 on-download 中自己实现下载

@flyingfishzxf
Copy link
Author

如果 UploadFileInfo 的 status 不为 error 且设置了 url,那么就会渲染为一个 a 标签来导航,报错是因为出于安全原因,禁止从页面打开 Data URI 网址。Blocking Top-Level Navigations to data URLs 解决方法:自己实现 fileList 组件,或者 UploadFileInfo 中不设置 url,只通过下载按钮来下载文件,然后在 on-download 中自己实现下载

谢谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
untriaged need to sort
Projects
None yet
Development

No branches or pull requests

2 participants