首页 技术 正文
技术 2022年11月14日
0 收藏 509 点赞 2,366 浏览 1863 个字

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

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

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

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

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

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

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

npm install express
npm install formidable
npm install path

第二十五行可以拿到图片在node服务器中的链接,大家可以通过小程序端的success回调函数拿到链接等数据,然后保存在data中,通过{{imgSrc}}进行渲染就能确定你的逻辑已经走通了。

nodeJs实现微信小程序的图片上传

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

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,024
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,514
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,362
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,143
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,776
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,854