Question

我正在尝试创建一个带有客户端文件输入的网站，其中一些数据完全在客户端上处理，而没有任何内容发送到服务器。

我有以下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>

当我单击按钮时，数据不会在文本区域中更新，但是当我再次单击按钮时，数据将在单击后立即加载到文本区域中。我可以正确地加载文件吗？我想念什么？谢谢！

Answer 1

我还必须这样做以获取文件的内容：

<script>
let data;
let files;
$: {
    if (files && files[0]) {
        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" bind:files />
    <div>
        <textarea id="datafield" rows="10" cols="50">{data}</textarea>
    </div>
</main>

Answer 2

在文件输入中，您要绑定值而不是click事件。

像这样：

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

or bind:value={files}

{files}

希望这会有所帮助。

Answer 3

如果要使用自定义按钮而不是难看的默认按钮：代码精简+ Framework7

<script>
let browseInput;
let data;
let files;

$: {
    if ... see answer 2 
   }
</script>

<input bind:this={browseInput} type="file" id="fileinput" class="hidden" bind:files={files}>
<Button onClick={() => browseInput.click()} fill raised">Open Keystore File</Button>

<style>
.hidden {
   display: none !important;
 }
</style>

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

3 个答案: