入门级node+uni-app开发即时通讯聊天室(5)用户详情页面(二)

前言: 这篇介绍图片的上传至服务器,同时与前端的联调,退出应用。
首先在项目的根目录下新建一个文件upload.js,我们在根目录下创建的文件,方便从根目录下操作存放路径。首先项目根目录下安装multer模块

cnpm install multer --save
Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。它是写在 busboy 之上非常高效。
Multer 接受一个 options 对象,其中最基本的是 dest 属性,这将告诉 Multer 将上传文件保存在哪。如果你省略 options 对象,这些文件将保存在内存中,永远不会写入磁盘。
.single(fieldname)
接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。

在这里插入图片描述

这里需要说明一下,我们所需要的资源路径他是个被请求的路径,但不完全等同于路由。而通常这种静态资源我们都不能让他直接被我们所选择的控制器直接控制,我们应该过滤,不让这个控制器直接把静态资源文件当做请求路径处理。
故此,查找express框架的静态资源处理方法,然后你很快的就能得出答案。使用express的中间件可以解决。代码不复杂。
在这里插入图片描述
主文件下插入过滤语句,这段表示app 不去处理我们的静态资源存放目录。在根目录下创建一个文件夹名:public,public下在创建一个文件夹名images用于存放图片。接下来试着我们的静态资源是否能被正常请求并被返回给浏览器了。先把我们的jwt拦截给注释了。
在这里插入图片描述
可以正常获取图片资源了,接下来到我们进行前端的处理了。记得在主启动文件中把upload模块传入app进行控制。
在这里插入图片描述
这里的拓展名过滤H5端测试需要的是2.9.9+,这里我不能亲自测试是否能用了。但是手机模拟器是只能传图片的,这个毫无疑问。那我们首先先看看他返回什么把。
在这里插入图片描述
在这里插入图片描述
https://uniapp.dcloud.io/api/request/network-file
通过查看文档,我们可以知道得到的图片资源,我们只需要他的临时路径就可以了。然后通过url发起请求,让我们的服务器保存这个被选择的资源。

在这里插入图片描述
我们看看他能做到了没有。
在这里插入图片描述
成功了,接下来我们只需要把数据库里的图片引用地址更改就行了。
在这里插入图片描述
在这里插入图片描述
我希望如果你跟着我的教程写到现在已经基本能触摸到这种流程了,接下来除去必要的语句解释不会再对一些简单明显的语句进行解释,转而对思路的探讨,在我看来,现在的你应该能写出显而易见的业务逻辑了。
退出应用很简单:清除stoarge,redirect 到login页面即可。自己试着做做把。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值