现在我们去给单独的文件添加一个页面 .. 页面上显示的就是上传的文件 .. 如果是图片就显示一张图片，如果是视频就显示一个视频 ..

先在资源控制器里准备点数据再渲染一个视图 .. 单个资源的处理用的是控制器里的 show 这个方法 .. 先把 params 解构出来 .. 还有 view ..

添加一个 file .. await .. 用一下 File.find .. 资源 id 是 params.id ..

渲染一个视图 .. view.render .. 视图可以是 file.show .. 再给视图传递点数据 .. 名字是 file .. 用一下 file 的 toJSON ..

视图

下面去创建需要用的这个视图 .. 放在 resources .. views .. file 的下面 .. 名字是 show.edge ...

视图里用一下 main 这个布局 .. 设置一下这个布局里的 content 区域 ... 里面是一个 div，加上 container ... 再添加一个 my-5 .. 来点上下外边距 ..

包含的内容可以判断一下 ... 如果 file 的 type 等于 image ，文件的类型是图像 .. 可以用一个 figure 标签，加上 figure ..

里面是个 img 图像 .. 加上 figure-img img-fluid .. rounded .. 图像的位置是 /uploads 再加上 文件的名字 .. file.file_name .. 元素上再添加一个 alt 属性，绑定一个 file.client_name ..

再用一个 figcaption .. 加上 figure-caption .. text-right .. 里面绑定一个 file.client_name .. 文件的原名 ..

下面再用一个 elseif .. 判断一下，如果 file.type 等于 video，文件是视频的话 .. 我们就用一组 video 元素 . 上面加上 w-100，宽度 100% ..

视频文件的地址是 /uploads/ file.file_name .. 元素上面添加一个 controls ，这样播放器上会显示控制栏 ..

再添加一个段落标签，text-muted .. text-right .. 一组 small 标签，里面绑定一个 file.client_name ..

预览

回到浏览器 .. 可以预览一下 ... 打开文件列表页面 ... 找到一个文件 ... 打开的就是一个文件页面 ..

现在遇到了一个问题 .. 没有正常显示上传的图片 .. 打开开发者工具 .. 检查一下这个地方的元素 ..

这里的 img 标签里面，图像的地址用的是移动之后的文件名 .. 再回到项目 .. 找到 public ... 打开 uploads ...

上传过来的文件 .. 这些文件的名字还是原名 ... 所以可以判断是我在移动文件的时候出了问题 ..

打开 FileController ... 找到 store 方法 ..

这里用的这个 move 方法错了 .. 我把本来给 move 方法提供的参数，交给了 Helpers 的 publicPath 这个方法了 .. 可以修改一下 .. 让这个选项参数作为 move 方法的第二个参数 ..

选中 uploads 里面所有的文件 ... 把它们删除掉 ...

再打开数据库客户端 ... 浏览一下 files 数据表 ... 选中表里的数据 .. 把它们也都删除掉 ... 再应用一下 ...

回到浏览器 ... 打开文件上传页面 .. 再选择上传一些图片文件 ...

完成以后再访问一下 Files 列表 ... 打开一个文件页面 ...

现在，页面上会正确的显示上传的图像文件 ... 因为这次文件上传以后，移动文件的时候使用了我们设置好的文件名 ..

回到浏览器 .. 再试一下 ... 同样会显示上传的这个图像文件 ..

下面我们可以再去上传一个视频文件 .. 选择一个视频 ... 提交一下上传 ... 回到文件列表 .. 找到这个视频 ...

这里同样会显示一个文件页面 .. 上面会显示上传的这个视频 ... 现在用的是浏览器自带的视频播放器 ... 按一下播放，可以播放上传的这个视频 ...