要在 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，只允许使用这个文件字段选择一个图片文件。

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