小程序+egg.js实现上传图片到服务器同时可以从服务器返回图片显示在前端（本地服务器）（多张图片上传）

最新推荐文章于 2024-07-14 12:30:00 发布

ass_ace

最新推荐文章于 2024-07-14 12:30:00 发布

阅读量3k

点赞数 6

分类专栏：微信小程序个人项目文章标签：小程序上传涂片图片服务器

本文链接：https://blog.youkuaiyun.com/baidu_39067385/article/details/98476160

版权

本文介绍了一个微信小程序项目，重点在于实现图片的上传和显示。通过小程序的wx.uploadFile接口将图片上传到自建的本地 Egg.js 图片服务器，服务器存储图片并返回路径。前端再根据路径展示图片，数据库中存储的是服务器上的图片路径。详细步骤包括小程序的图片选择和上传API，Egg.js服务器的图片存储和路由配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写过一个约拍微信小程序的项目，这整个项目都是以展示图片，上传图片为主，所以这个项目的核心就是需要有个图片服务器，如果无法实现在小程序上传图片到服务器，再从图片服务器获取图片返回前端展示，那么这个约拍小程序项目就无法实现。

虽然可以使用第三方的图片服务器，比如：七牛，但是由于我是小型项目，毕业设计演示的地方网络很大概率很很差，所以使用第三方图片服务器不大可行，所以我构建的图片服务器是本地服务器。

实现流程为：

1.小程序实现前端上传图片

2.小程序向图片服务器发送请求储存图片；

3.后端返回成功存储图片的路径，当所有图片都上传成功的时候，小程序再发送请求，把约拍相关的所有信息存进数据库，

数据库存储的是图片在服务器的路径；

4.当前端需要在展示图片的时候，直接通过后端返回的图片路径，通过img标签的src属性加载就行了，不过要记得加上后端运行项目的对应地址。因为我后端项目运行的地址是在端口7001，所以路径写法如下：
    <image src="{
   {http://127.0.0.1:7001/{
   {item.beatUrl}}/{
   {beatimage}}" class="yuepaithird-image" mode='aspectFill' wx:for="{
   {item.tookimg}}" wx:key="unique" wx:for-item="beatimage" />

实现效果如下：