vuetifyjs v-file-input 获取文件名称
时间: 2024-01-18 17:04:54 浏览: 29
v-file-input 是 Vuetify.js 提供的组件,用于上传文件。获取文件名称可以通过监听 v-model 值的变化,然后使用 JavaScript 的 File 对象的 name 属性获取文件名。
代码示例:
```html
<template>
<div>
<v-file-input label="Choose a file" v-model="file"></v-file-input>
<div v-if="file">{{ fileName }}</div>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
};
},
computed: {
fileName() {
return this.file ? this.file.name : null;
},
},
};
</script>
```
在上面的代码中,v-model 绑定的值是 file,当用户选择文件后,file 的值将被更新。通过 computed 计算属性,获取文件名并在页面上展示。
相关问题
uni-file-picker如何获得文件对象
uni-file-picker 是一个用于在Uni-App中选择文件的插件。要获得文件对象,可以使用以下步骤:
1. 在页面中引入 uni-file-picker 插件。
```
import filePicker from '@/uni_modules/uni-file-picker/js_sdk/uni-file-picker.js';
```
2. 使用文件选择器选择文件。
```
filePicker.chooseFile({
success: function (res) {
console.log(res);
}
});
```
3. 在 success 回调函数中,res 中包含了选择的文件信息,可以通过 res.tempFilePaths[0] 获取文件路径,通过 uni.uploadFile() 方法上传文件。
```
uni.uploadFile({
url: 'yourUrl', // 上传服务器地址
filePath: res.tempFilePaths[0], // 文件路径,通过 chooseFile 接口选择文件后确定
name: 'file', // 文件对应的 key ,开发者在服务器端通过这个 key 可以获取到文件二进制内容
success: function (uploadRes) {
console.log(uploadRes);
},
fail: function (err) {
console.log(err);
}
});
```
通过这些步骤,你就可以在 Uni-App 中使用 uni-file-picker 插件选择文件并获取文件对象了。
文件上传v-model:file-list
文件上传中的v-model:file-list是一个默认上传文件的属性,它可以用来绑定上传文件列表的数据。当文件上传状态改变时,可以通过on-change钩子函数来获取文件信息并将其存储在fileList中。同时,可以通过formData.append()方法将文件添加到表单数据中,例如formData.append("file", coverInfoValue.file.raw)。