英文:
[filepond]To register with the ID value serverId received from the server
问题
'filepond' 在 Vue 中被使用。但是出现了一个问题。
在 "process" 中，
文件传输到服务器后返回了ID值（response.id）。如果将这个ID注册为文件的 'serverId' 并在控制台中检查 'file'，它会正常注册。
mounted() {
setOptions({
server: {
process: (fieldName, file, metadata, load, error, progress, abort) => {
const formData = new FormData();
formData.append('mainData', file);
createmainData(formData, {
onUploadProgress: (event) => {
progress(event.lengthComputable, event.loaded, event.total);
}
})
.then(response => {
const serverId = response.id;
file.serverId = serverId;
load(response, serverId);
})
.catch(error => {
console.log(error);
error('Error uploading file');
});
console.log(file);
},
},
});
}
但是，如果运行 'updatefiles' 方法并在控制台中检查 'files'，
它会显示 'serverId: undefined'。
methods: {
updatefiles(files) {
this.files = files.map(files => files.setMetadata);
console.log('files', files);
},
}
如果查看制作者留下的评论，
我尝试了，但一直失败，可能我理解错了。
你能告诉我解决方案吗？
英文:
'filepond' is being used in vue. But there's a problem.
In "process",
The ID value was returned after the file was transferred to the server. (response.id) If you register this as 'serverId' of file and check 'file' as console, it is registered normally.
mounted() {
setOptions({
server: {
process: (fieldName, file, metadata, load, error, progress, abort) => {
const formData = new FormData();
formData.append('mainData', file);
createmainData(formData, {
onUploadProgress: (event) => {
progress(event.lengthComputable, event.loaded, event.total);
}
})
.then(response => {
const serverId = response.id
file.serverId = serverId
load(response, serverId)
})
.catch(error => {
console.log(error);
error('Error uploading file');
})
console.log (file)
},
},
});
}
But if you run 'updatefiles' methods and check 'files' as a console,
It says 'serverId: undefined'.
methods: {
updatefiles(files) {
this.files = files.map(files => files.setMetadata);
console.log('files',files )
},
},
If you look at the comments left by the producers,
I tried, but I keep failing, maybe I'm misunderstanding.
Can you tell me the solution?
答案1
得分: 1
你需要在文件成功传输到服务器后，将 serverId 添加到一个单独的数组中（即 uploadedFiles）。我在你的代码中没有看到这一点。有了这个数组，你将能够管理FilePond的内容以及已上传文件的顺序。
handleFilePondInit() {
this.uploadedFiles = [];
},
handleFilePondLoad(response) {
this.uploadedFiles.push(response);
return response;
},
handleFilePondUpdate(files, origin, target) {
this.uploadedFiles = files.map(file => file.serverId);
this.uploadedFiles = this.uploadedFiles.filter(element => { return element !== null; });
},
英文:
You have to push serverId to separate array (i.e. uploadedFiles) in the process after the file was successfully transfered to the server. I can't see this in your code. With this array you will be able to manage FilePond content and order of uploaded files.
handleFilePondInit() {
this.uploadedFiles = [];
},
handleFilePondLoad(response) {
this.uploadedFiles.push(response);
return response;
},
handleFilePondUpdate(files, origin, target) {
this.uploadedFiles = files.map(files => files.serverId);
this.uploadedFiles = this.uploadedFiles.filter(element => { return element !== null; });
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论