Vuetify v-file-input 在 javascript vue 中设置文件答案

【问题标题】：Vuetify v-file-input set files in javascript vueVuetify v-file-input 在 javascript vue 中设置文件
【发布时间】：2020-06-18 04:38:53
【问题描述】：

以下场景：

用户填写包含v-file-input 的表格。附加的文件也被发送到服务器并保存在那里。用户可以选择edit 表单。表单的所有字段都填充了保存的数据。如何使用保存的文件动态填充v-file-input 字段？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

因此，您的服务器将需要为该解决方案对您的文件进行 base64 转换。注意：客户端 = Vue 应用程序。

客户端向服务器请求 base64 格式的文件数据（RESTful Endpoint 或其他方式，由您选择）。这应该在 created 挂钩中完成，并分配给数据属性（我将使用 myFileBase64 作为示例）。
客户端有一个计算属性myFileAsFile，它调用以下函数（credit）将myFileBase64从base64转换为File类型：

 function dataURLtoFile(dataurl, filename) {

        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);

        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, {type:mime});
    }

    //Usage example:
    var file = dataURLtoFile('data:text/plain;base64,aGVsbG8gd29ybGQ=','hello.txt');
    console.log(file);

客户端将v-input 的值设置为myFileAsFile。这可以通过v-bind:value 完成

这是一个 Codepen，展示了我的答案的作业部分：https://codepen.io/Qumez/pen/OJVxvYY

【讨论】：