用户登录

继续编辑一下 useCreatePost 这个 hook,准备两个数据,解构声明 file,还有 setFile,用一下 useState,类型是 File 或 null。这里的 file 这个数据表示的就是用户选择的要上传的文件。

下面再解构声明 imagePreviewUrl,还有 setImagePreviewUrl,用一下 usetState,默认值是空白字符。这个 imagePreviewUrl 是选择的图像的预览地址。

然后声明一个 fileInput,用一下 useRef,默认值是 null,类型是 HTMLInputElement。

createImagePreview

用户选择了要上传的图像以后可以创建一个预览图像,声明一个 createImgaePreview,接收一个 file 参数,类型是 File。在这个函数里面,先声明一个 reader,新建一个 FileReader()。

然后用一下 reader.readAsDataURL,把 file 交给它。再设置一下 reader.onload,它是一个函数,有个 event 参数,在函数里面,执行 setImagePreviewUrl,把 event.target?.result 交给它,as string,作为字符串。

createFile

下面再定义一个上传图像文件用的方法,名字是 createFile,用 async 标记一下这个方法,有个 file 参数,类型是 File,还需要一个 postId 参数,类型是 number。

在函数里声明一个 formData,新建一个 FormData() ,执行一下 formData.append,字段名字叫 file,值是 file。

然后声明一个 response,等于 await,用一下apiHttpClient,接口地址是 files 加上一个 post 查询参数,值是 postId。

再提供一个对象参数,把请求用的 method 设置成 POST 这种方法,设置一下 body,值是 formData。

上传了文件以后,判断一下 response.status 是不是等于 201,如果是说明文件上传成功了。执行 setFile,提供一个 null,再执行 setImagePreviewUrl,提供一个空白字符。然后设置一下 fileInput.current!.value 让它等于空白字符。

createPost

找到 createPost 这个方法,发布了内容以后,可以再请求上传相关的文件,这里 await 执行一下 createFile,提供一个 file 还有 postId。

提示 file 可能是 null,在这个判断的条件里面,我们可以再加上一个 file。

最后在这个 hook 返回的东西里面,再添加一个 file,setFile,fileInput,imagePreviewUrl,setImagePreviewUrl,createImagePreview,还有 createFile。

准备上传文件需要的数据与方法《 Next.js:内容管理 》

统计

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

社会化网络

关于

微信订阅号

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