选择文件用的文件字段

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

要在 Vue 应用里实现文件上传的功能,可以先准备一个选择文件用的字段。我们还是直接把它放在应用的 app 这个组件的模板里。

添加一个 input 元素,类型是 file,你会发现在应用的界面上现在会显示一个选择文件用的表单元素。点击这个选择文件按钮,会打开一个窗口,用户可以在自己的电脑上选择要上传的文件。

完成以后会在这个文件字段元素上触发一个 change 事件,我们可以监听这个事件,然后在事件对象里得到用户选择的文件。

给这个元素绑定一个 change 事件,用 onChangeFile 这个方法处理发生在这个元素上的 change 事件。 然后在组件在方法里,可以添加一个方法,名字是 onChangeFile ,事件处理器方法默认都接收一个 event 参数。

用户选择的文件可以在这个 event 对象的 target 里的 files 这个属性里找到。把这个属性的值输出到控制台上检查一下。

回到浏览器,点击选择文件,找到在电脑上的一个图像文件,选中以后,点击 打开。 在控制台上你会发现输出了一个 FileList,在这个文件列表里你可以找到一个文件对象。这个文件对象里有这个文件的更新时间,文件的名字,大小,还有文件的类型。

在这个元素上可以用 accept 属性设置一下允许选择的文件类型,这里我们把它设置成 image/png, image/jpeg 还有 image/jpg 。这样用户就只能通过这个文件字段选择 png 或者 jpg 类型的图像文件了。这里用的文件类型是 mime type,具体什么样的文件对应哪种 mime type,你可以在网上搜索一下。

默认这个选择文件字段只能选择一个文件,如果你想让用户可以选择多个文件,可以在元素的上面再添加一个 multiple 。

再试一下,选择文件,这样就可以选择多个文件了,选中多个文件,然后点击 打开。 元素上发生 change 事件,执行了组件里的 onChangeFile 方法,它会把用户选择的文件输出到控制台上。

你会发现,这次在这个 FileList 里面就会包含多个文件对象,注意这个 FileList 不是一个数组,它是一个对象,对象里面的东西有个序号,用这个序号可以访问到这个对象里的某个文件对象。

在这个 onChangeFile 方法里,声明一个 file,让它的值等于 event.target.files[0]。 下面判断一下,如果这个 file 有值,可以设置一个组件里的 file 这个数据,让它等于 file 。在组件的数据里再添加一个 file ,默认让它等于 null 。

这里可以继续再设置一下组件里的 title,它的值可以用一下 file.name.split,给这个方法一个点,这个 file.name 是被选择的文件的名字。

用一下字符串上的 split ,把这个字符串分离成两部分,结果会是一个数组,我们只需要这个数组里的第一个项目,把这个项目的值交给这个组件的 title 。

这里我要做的是当用户选择了文件以后,把这个被选择的文件的名字,去掉文件名的后缀以后,让它作为要创建的内容标题。

暂时我们先去掉在这个文件字段元素上用的 multiple,只允许使用这个文件字段选择一个图片文件。

下面再到浏览器上测试一下,点击 选择文件 ,选择电脑上的一个图片文件,你会发现这个被选择的文件的名字,会作为这个内容标题元素的值。

选择文件用的文件字段《 Vue.js 前端应用 #11:上传文件 》

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点