用户登录

用户选择了文件,输入了内容标题,按下回车。可以创建一个新的内容,然后可以请求服务端的上传文件的接口,上传用户选择的文件。

在 app 组件里可以先定义一个方法,用 async 标记一下这个方法,因为方法里会包含异步的动作,方法的名字叫 createFile,接收一个 file 参数,还有一个 postId 参数。

在这个方法里先创建一个表单数据。声明一个 formData,新建一个 FormData。 这个 formdata 的值就相当于是我们把一个表单的编码格式设置成 multipart/form-data 以后得到的表单数据。

在这个表单数据里用 append 添加一个字段,字段的名字设置成 file,这个名字是服务端接口那里规定好的,对应的值是这个 createFile 方法接收的 file 参数,它应该是一个文件对象。

下面可以请求上传文件,用一组 try,catch ,请求的时候遇到问题,可以设置一下组件里的 errorMessage,让它等于 error 参数的 message 这个属性。

在 try 这个区块里,声明一个 resposne,等于 await 执行一下 apiHttpClient 上面的 post 这个方法,发送一个 post 类型的 http 请求。一个字符模板,接口的地址是 /files ,在地址里可以加上一个 post 查询符,它的值应该是某个内容的 id,这里可以设置成 postId 这个参数的值。

请求里带的数据就是上面定义好的这个 formData。 接口需要验证用户的身份,添加一个配置选项参数,里面设置一下 headers,要添加一个 Authorization 头部,对应的值是 Bearer 空格,加上组件里的 token 这个数据的值。

成功处理了这个上传文件的请求以后,可以再清理一下,把组件的 file 设置成 null,再把组件里的 imagePreviewUrl 也设置成 null。

另外还得再清理一下文件选择字段,先找到这个文件字段元素,在它上面可以用一个 ref ,设置一个值,比如 file。这样在组件里面,我们可以通过 $refs 得到这个元素。

这里我们把组件里的 $refs 里的 file 这个元素的 value 的值设置成一个空白。 最后可以在控制台上输出 repsonse.data ,检查一下从服务端响应回来的数据。

使用

下面可以再找到组件里的 createPost 这个方法,在内容标题里输入标题,按下回车以后会执行这个方法创建一个新的内容。

这里我们可以先判断一下,如果组件的 file 有值,可以再执行一下组件里的 createFile 这个方法,第一个参数是 this.file,第二个参数是新创建的这个内容的 id,这个 id 是在 response.data.insertId 这个属性的值。

测试

在浏览器上测试一下,选择文件,找一张图片,确定一下,然后点击内容标题,按一下回车,会创建新的内容,然后上传用户选择的文件。

上传文件很快,不过我们的服务端需要处理这个文件,把它调整成几种不同的尺寸,这需要一段时间,大概得等个十几秒左右。

成功以后,我们会在控制台上看到输出了服务端做出的响应。在这个响应的数据里面,insertId 的值就是新创建的文件数据记录的 id 号,使用这个 id 我们可以查看刚才上传的图像文件。

新建一个浏览器标签,地址是 http://localhost:3000/files/文件的 id ,再加上一个 serve ,现在你看到的就是上传的这个原始图像。

在这个地址里面我们可以用 size 设置一下需要的图像尺寸,这个尺寸可以是 large,medium 或者 thumbnail 。

请求上传文件《 Vue.js 前端应用 #11:上传文件 》

统计

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

社会化网络

关于

微信订阅号

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