用户登录

在创建内容页面组件里声明一个上传文件用的函数,名字是 createFile ,用 async 标记一下,函数有个 postId 参数,类型是 number。

在函数里面先准备一个表单数据,声明一个 formData,新建一个 FormData。 然后在这个表单数据里面添加一个文件字段 ,用一下 formData.append,字段的名字叫 file,对应的值是 file.value。

下面可以请求上传文件,await 用一下 useApiFetch,接口地址是 files,添加一下 post 查询符,它的值是文件相关的内容 ID,这里就是 createFile 这个函数的 postId 这个参数。再提供一个选项参数。

把请求的用的 HTTP 方法设置成 POST。然后是请求的主体,用 formData 作为 body 参数的值。

解构一下执行 useApiFetch 返回的东西,需要的是 data。

下面判断一下 data.value,如果有值,可以设置一下 imagePreviewUrl.value 的值,让它等于空白字符。

createPost

修改一下 createPost,创建了内容以后,可以执行一下 await createFile,需要提供一个内容的 ID,data.value as any,然后访问一下 insertId 这个属性的值。

测试

在浏览器可以测试一下,先选择一个图像文件。 然后输入内容的标题,还有内容的正文。点击 发布。这样会先创建一个内容,然后再请求上传图像文件。

完成以后,回到内容列表页面,这里会显示刚刚发布的这个内容。

在 Nuxt 应用里实现上传文件(实施)《 Nuxt.js:内容管理 》

统计

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

社会化网络

关于

微信订阅号

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