博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodeJs实现微信小程序的图片上传
阅读量:4694 次
发布时间:2019-06-09

本文共 2450 字,大约阅读时间需要 8 分钟。

今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回

首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图片上传的正常逻辑。

1 //添加图片 2   addImg: function() { 3     var that = this; 4     console.log(9 - that.data.checkImgLength) 5     if (9 - that.data.checkImgLength >= 1){ 6       wx.chooseImage({ 7         count: 9 - that.data.checkImgLength, // 默认9 8         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 9         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有10         success: function (res) {11           var tempFilePaths = res.tempFilePaths//这里拿到的是图片在微信客户端的临时路径!!!12           let length = tempFilePaths.length;13           let tempList = that.data.imgLists.concat(tempFilePaths);//JSON数据14           that.setData({15             imgLists: tempList,16             checkImgLength: that.data.checkImgLength + length//长度相加,这里是为了选择的图片不会超过917           })18         }19       })20     }21   },

这里要注意的是,第11行的路径是临时的,再刷新,这个路径就无用了,甚至这个时候复制这个路径到自己的浏览器里也没有用,这里要注意,正确的业务逻辑是传到自己的服务器,再保存到服务器,再由客户端通过服务器链接拿到图片。

下面是我的node服务器端的部分代码

1 var express = require("express"); 2 var formidable = require("formidable"); 3 var path = require("path") 4 var fs = require("fs") 5 var image = require("imageinfo") 6 const listenNumber = 5000; 7  8 var app = express(); 9 10 app.use(express.static('upload'))//这个很重要,必须要这个才能拿到图片链接,而不是进入路由,有兴趣的同学可以删掉试验一下11 12 app.post("/upload", (req, res) => {13     var form = new formidable.IncomingForm();//既处理表单,又处理文件上传14     //设置文件上传文件夹/路径,__dirname是一个常量,为当前路径15     let uploadDir = path.join(__dirname, "../upload/");16     form.uploadDir = uploadDir;//本地文件夹目录路径17 18     form.parse(req, (err, fields, files) => {19         let oldPath = files.cover.path;//这里的路径是图片的本地路径20         console.log(files.cover.name)//图片传过来的名字21         let newPath = path.join(path.dirname(oldPath), files.cover.name);22         //这里我传回一个下载此图片的Url23         var downUrl = "http://localhost:" + listenNumber + "/upload/" + files.cover.name;//这里是想传回图片的链接24         fs.rename(oldPath, newPath, () => {
//fs.rename重命名图片名称25 res.json({ downUrl: downUrl })26 })27 })28 })29 30 app.listen(listenNumber)

部分重要逻辑大家可以按照自己的需求来做,这里需要引用的第三方包是express、formidable、path,大家可以在终端输入以下命令下载:

npm install expressnpm install formidablenpm install path

第二十五行可以拿到图片在node服务器中的链接,大家可以通过小程序端的success回调函数拿到链接等数据,然后保存在data中,通过{

{imgSrc}}进行渲染就能确定你的逻辑已经走通了。

希望我的教程能够帮到大家,加油!!!

转载于:https://www.cnblogs.com/JobsOfferings/p/JonsOfferings_node_imgUp.html

你可能感兴趣的文章
Adobe® Reader®.插件开发
查看>>
【POJ 3461】Oulipo
查看>>
Alpha 冲刺 (5/10)
查看>>
使用Siege进行WEB压力测试
查看>>
斑马为什么有条纹?
查看>>
android多层树形结构列表学习笔记
查看>>
Android_去掉EditText控件周围橙色高亮区域
查看>>
《构建之法》第一、二、十六章阅读笔记
查看>>
arrow:让Python的日期与时间变的更好
查看>>
(转)Excel的 OleDb 连接串的格式(连接Excel 2003-2013)
查看>>
Java并发编程
查看>>
Git Stash用法
查看>>
sql server 2008学习8 sql server存储和索引结构
查看>>
Jquery radio选中
查看>>
postgressql数据库中limit offset使用
查看>>
测试思想-集成测试 关于接口测试 Part 2
查看>>
windows下mysql密码忘了怎么办?【转】
查看>>
php生成器使用总结
查看>>
T-SQL中的indexof函数
查看>>
javascript基础之数组(Array)对象
查看>>