gpt4 book ai didi

svelte - svelte 中的文件输入不更新数据

转载 作者:行者123 更新时间:2023-12-02 02:56:30 27 4
gpt4 key购买 nike

我正在尝试创建一个带有客户端文件输入的网站,其中一些数据完全在客户端上处理,并且不会发送到服务器。

我有以下 Svelte 组件 (App.svelte):

<script>
let data;
function handleFileSelect(evt) {
var files = evt.target.files;
if (! (files && files[0])) {
return;
}
let binfile = files[0];
let reader = new FileReader();
reader.onload = function(evt) {
data = new Uint8Array(evt.target.result);
}
reader.readAsArrayBuffer(binfile);
}
</script>

<main>
<label for="fileinput">Your data</label>
<input type="file" id="fileinput" on:click={handleFileSelect}/>
<div>
<textarea id="datafield" rows="10" cols="50">{data}</textarea>
</div>
</main>

当我单击该按钮时,文本区域中的数据不会更新,但是当我第二次单击该按钮时,数据会在单击后立即加载到文本区域中。我在 svelte 中加载文件的方向正确吗?我缺少什么?谢谢!

最佳答案

在文件输入上,您想要绑定(bind)值而不是单击事件。

像这样:

<script>
let files = [];
<input
bind:files
type="file"
accept="image/*">

or bind:value={files}

{files}

编辑:回答chovy的问题

let template = null;
let files = null;

$: if (files) {
const fileText = files[0].text();
fileText.then((text) => {
template = text;
});
files = null;
}

请注意,我只想使用代码中的第一个文件,如果您使用多文件上传,则必须从文件调用中删除 [0],迭代数组并写入就像处理任何其他数组数据一样,将每个单独的文件放入指定的变量中。在上述情况下,模板将包含文本形式的实际文件数据。

希望这有帮助。

关于svelte - svelte 中的文件输入不更新数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61037078/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com