我如何获取文件到服务器并使用它的响应显示在Svelte前端？
我如何获取文件到服务器并使用它的响应显示在Svelte前端？
提问于 2022-07-20 10:09:47
Svelt文件中的：
import { FileDropzone } from "attractions";档案-Dropzone.svelte：
async function acceptUpload(e) {
...some code...
const fetchResponse = await fetch('http://localhost:5000/upload', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"document-array": fileParagraphs})
});
let jsonedResponse = await fetchResponse.json();
--> let responseArray = JSON.parse(jsonedResponse); - I want to use this in the main Svelte to display some content after user uploaded a file.因此，的目标是显示从fetch到FastAPI服务器的内容。 Fetch发送我通过FileDropzone从Svelte的“景点”获得的文件内容。我只能在控制台中打印响应，作为位于另一个Svelte文件中的函数。
我试图将响应转移到主Svelte，然后更新网页上的内容。但我不知道如何从另一个Svelte文件的函数中得到变量的值.我试图导出和导入，但似乎是不可能的，因为变量位于函数中。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-20 13:04:09
您可以使用FileDropzone绑定(bind：)直接从主Svelte文件中获取文件(或表单)
将函数移动到主File.svelte
- Create --一个带有空数组的变量--将文件保存到其中--
- 添加绑定到您的
- ，现在您的新变量充满了文件！
4.1)如果需要，通过{}获取绑定值(文件)-然后您可以在屏幕上显示这个变量。这就是你在页面上呈现价值的方式。
那么您应该有类似的代码：
let files = []; //<-- Create a new array initially.
import { FileDropzone } from "attractions";
function fetchServer(--> files array here <--) {
//---your func body for fetching
}
</script>
<main>
<FileDropzone bind:files/> //<-- Now our files will go into a new array "files"
<p>{fetchServer(files)}</p> //<-- Then we render its value on the Web Page.
</main>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73049727
复制相关文章
相似问题
腾讯云开发者
