如何解决vue-filepond 组件中已上传文件的预览
我希望你能告诉我我在使用 vue-filepond 时做错了什么。
所以我的问题是当我想编辑我的表单时,我无法预览我之前上传的文件,奇怪的是我对 Vue 2 使用了所有相同的代码并且它没有问题,但在 Vue 3 上却没有t 工作(我确定我遗漏了一些东西,我确实为 Vue 2 安装了 v6,为 Vue 3 安装了更新版本)。
当我编辑表单时,我的文件在那里,但在 Filepond 组件中不可见
Filepond 组件如下所示:
<file-pond
ref="pond"
credits="false"
allow-multiple="true"
allowFileTypeValidation="false"
allowFileSizeValidation="false"
fileValidateTypeDetectType="false"
allowRemove="true"
checkValidity="false"
instant-upload="false"
v-bind:files="myFiles"
:beforeRemoveFile="handleFilePondRemoveFiles"
v-on:updatefiles="handleFilePondUpdateFiles"
v-on:init="handleFilePondInit"
/>
因此,当我在 Vue 的安装方法中编辑表单(使用 Laravel 作为后端并将数据传递给刀片文件中的 Vue 组件...)较早上传(img 或 pdf)但在 Vue 3 上没有,但实际上在那里:
mounted() {
if (this.isEdit) {
for (let file in this.files) {
let f = new File([this.files[file]],this.files[file].name,{
type: 'application/pdf'
});
this.myFiles.push(f)
}
}
},
我浏览了您的文档,但找不到任何适合我的正确信息或代码示例...
感谢帮助!
解决方法
我想出了这个解决方案并且它有效,如果我错了,请随时纠正我:)
mounted() {
if (this.isEdit) {
for (let file in this.files) {
this.getUploadedFile(this.files[file].original_url,this.files[file].name,this.myFiles)
}
}
},
和方法
methods: {
async getUploadedFile(url,fileName,arr) {
await fetch(url)
.then(res => res.blob())
.then(blob => {
arr.push(new File([blob],{
type: blob.type
}))
});
},
在 filepond 组件中,我绑定了这样的文件:
v-bind:files="[...myFiles]"
现在我可以在 FilePond 组件中看到我上传的文件并删除它或上传新的...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。