用户登录以后，点击页头这里的加号小图标，可以打开创建内容页面。在这个页面上我们可以添加一个选择文件用的字段 ，用户在发布内容的时候，可以选择一个相关的图像文件。

打开 create 这个页面组件，在组件的模板里，这个 form 元素的里面再添加一组 div，里面包装的东西可以先添加一个按钮，一组 button 元素，按钮文字是选择图像文件，元素上添加一个类，类的名字是 bordered。

在它下面再添加一个文件字段，一个 input ，类型是 file，在这个元素上添加一个 hidden 属性把元素隐藏起来，再用 accept 设置一下接受的文件类型，image/png，image/jpeg，还有 image/jpg。

在这个 file 类型的 input 元素上，再添加一个 ref，名字叫 fileInput，这样我们可以在组件里直接引用这个元素。

在这个 button 元素上，绑定一下 click 事件，提供一个事件处理器，一组括号，用一下 $refs.fileInput 用 as 断言它的类型是 HTMLInputElement，在括号外面，用一下 input 元素上面的 .click() 这个方法。这样点击这个按钮的时候，就相当于是点击了这个 file 类型的 input 元素。

在浏览器测试一下，现在这个创建内容页面上会显示一个选择图像文件的按钮，点一下这个按钮会打开文件选择窗口，在这里我们可以选择在电脑上的图像文件。

设置文件

回到创建内容页面组件，在组件模板里，先找到这个 file 元素，绑定一下它的 change 事件，用 onChangeFile 来处理这个事件。

在组件的脚本里面，声明一个 file，用它表示用户当前选择的图像文件，它的值用一下 ref，数据的类型是 File。

再准备一下 file 元素的 change 事件的处理器，声明一个函数，名字是 onChangeFile，它有个 event 参数，类型是 Event。在函数里面，解构一下 event.target，用 as 断言它的类型是 HTMLInputElement ，把这个事件对象的 target 属性里的 files 解构出来，这里的东西就是用户通过 file 元素选择的文件的列表。

下面设置一下 file 这个数据的值，先判断一下 files ，然后设置一下 file.value ，让它等于 files 里的 0 这个项目。在控制台上可以输出 file.value 检查一下。

再回到浏览器，点击选择图像文件，选择电脑上的一个图像文件，点击打开。文件元素发生 change 事件会执行的 onChangeFile 函数，在控制台上你会看到输出了用户选择的这个文件对象。