如何使用拖放读取 Fable Elmish 中的 Browser.Blob

Question

我正在尝试在寓言 elmish 中读取 Browser.Blob 对象 - 我可以在 javascript 中看到它是这样完成的，但我不确定如何处理 FileReader onload 事件。

var b = new Blob(...);
var fr = new FileReader();
fr.onload = function(evt) {
    var res = evt.target.result;
    console.log("onload",arguments, res, typeof res);
};
fr.readAsArrayBuffer(b);

我正在使用 ondrop 事件来读取已删除项目的文件列表。我可以获取文件名并获取 blob。下面的函数不起作用，因为我在 e.target.result 上收到错误，但我认为它无论如何都不会起作用，因为它会在设置之前返回 blobstr。

如何读取此函数中的 blob 字符串？

let encodeString (filename:string) (blob:Browser.Blob) () = promise {
    try
        let mutable blobstr = ""
        Console.WriteLine(filename)
        let fs = Browser.FileReader.Create()
        fs.onload <- (fun e -> blobstr <- e.target.result)         
        fs.readAsBinaryString(blob)      
        return Result.Ok (filename,blobstr)
        //return Result.Ok (filename,"")
    with ex -> return (Error ex.Message)
}

视图中的更多代码和上下文更新：

视图 - 处理拖放：

        div [   Class "card border-primary"
                Draggable true
                Style [ Height "100px" ] 
                OnDragOver ( fun e ->
                                    Console.WriteLine("hovering")
                                    e.preventDefault()
                                    NoAction |> dispatch
                )
                OnDrop ( fun e ->
                                    Console.WriteLine("dropping")
                                    e.preventDefault()
                                    let fileList= e.dataTransfer.files
                                    let files = [0. .. fileList.length - 1.]
                                                |> List.map int
                                                |> List.map (fun x -> fileList.item(float x))
                                    let fileInfos = [ 
                                        for file in files do 
                                            yield file.name, file.slice()
                                    ]
                                    FilesLanded fileInfos |> dispatch
                )                                             
        ] []

更新：

    | FilesLanded files ->
        model, Cmd.batch (
                files
                    |> List.map ( fun (x,y) -> Cmd.ofPromise (encodeString x y ) () FileLanded UnexpectedError )
        )
    | FileLanded res -> 
        match res with 
            | Ok (name,contents) ->
                Console.WriteLine(name)
                Console.WriteLine(contents)
                model, Cmd.none
            | Error err -> 
                { model with ErrorMessage= err }, Cmd.none 
    | UnexpectedError ex ->
        { model with ErrorMessage= string ex }, Cmd.none 

谢谢

Answer 1

我能够完成这项工作的唯一方法是使用本地存储。这有点hacky，但它有效。

下面的代码供感兴趣的人使用。

查看：

...
        div [   Class "card border-primary"
                Draggable true
                Style [ Height "100px" ] 
                OnDragOver ( fun e ->
                                    Console.WriteLine("hovering")
                                    e.preventDefault()
                                    NoAction |> dispatch
                )
                OnDrop ( fun e ->
                                    Console.WriteLine("dropping")
                                    e.preventDefault()
                                    let fileList= e.dataTransfer.files
                                    let files = [0. .. fileList.length - 1.]
                                                |> List.map int
                                                |> List.map (fun x -> fileList.item(float x))
                                    let fileInfos = [ 
                                        for file in files do 
                                            yield file.name, file.slice()
                                    ]
                                    FilesLanded fileInfos |> dispatch
                )                                             
        ] []

更新：

...
    | FilesLanded files ->
        model, Cmd.batch (
                files
                    |> List.map ( fun (x,y) -> Cmd.ofPromise (encodeImageToUrl x y ) () FileLanded UnexpectedError )
        )
    | FileLanded res -> 
        Console.WriteLine(res)
        match res with 
            | Ok img ->
                let impurl = Browser.localStorage.getItem(sprintf "imp_%s" img.FileName).ToString()
                printfn "successfully read file: %s - %s" img.FileName img.DisplayUrl                    
                let imgWithUrl = { img with DisplayUrl= impurl }
                { model with ImportingImages= List.append model.ImportingImages [  imgWithUrl ] }, Cmd.none
            | Error err -> 
                { model with ErrorMessage= err }, Cmd.none 

阅读图片：

    let encodeImageToUrl (filename:string) (blob:Browser.Blob) () = promise {
        try
            printf "%s: %f" filename blob.size
            let fs = Browser.FileReader.Create()
            fs.onload <- (fun e -> 
                                printf "reader returned"
                                let res= e.target?result
                                Browser.localStorage.setItem(sprintf "imp_%s" filename, res)
                                )         
            fs.readAsDataURL(blob)   
            //the bloburl is empty at this point, we pull the actual url in the update method from local storage   
            return Result.Ok { FileName= filename; ImageBlob= blob; DisplayUrl= bloburl }
        with ex -> return (Error ex.Message)
    }