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

7 浏览
0 Comments

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

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

0

1 答案

0 Comments

问题的原因是客户端需要将文件数据转换为base64格式，并将其设置为v-file-input的值。解决方法是通过在Vue应用程序中请求服务器端以base64格式获取文件数据，并将其转换为File类型，并将其设置为v-file-input的值。

首先，在created钩子中，客户端从服务器端请求以base64格式获取文件数据，并将其分配给一个数据属性（例如myFileBase64）。

其次，客户端有一个计算属性myFileAsFile，该计算属性调用下面的函数将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来实现。

以上是解决该问题的步骤和方法。通过将文件数据转换为base64格式，并将其设置为v-file-input的值，可以实现在javascript中使用Vuetify的v-file-input组件。

0