小程序模板网

微信小程序开发(二)图片上传

在之前的博客《Node.js+express+MySQL使用七牛云实现的用户头像修改》,已经实现了在MUI框架或者《 Ajax实现图片上传》。之前都是使用Node.js写的一个后台接口,就可以使用ajax上传了,在MUI框架中的mui.ajax其实还是ajax。在《Node.js+express+MySQL使用七牛云实现的用户头像修改》我已经详细的说了怎么配置七牛了,这里不再说明。

准备工作

配置uploadFile合法域名

在做微信小程序的图片上传之前我们需要先配置uploadFile的合法域名。这个可以看《微信小程序开发(一)新建小程序项目》的服务器配置部分。

看小程序文档

看小程序文档—wx.uploadFile,看文档主要是看小程序给的api是怎么使用的。在使用wx.uploadFile之前需要先使用wx.chooseImage(OBJECT)这个api,因为我们需要先选择图片。

代码实现

有了上面的准备工作后我们就可以实际操作了。

小程序端的实现

小程序端的实现其实很简单,一个事件去出发选择上传操作。

 

				
  1. wx.chooseImage({
  2. count: 9, // 默认9
  3. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  4. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  5. success: function (res) {
  6. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  7. var tempFilePaths = res.tempFilePaths;
  8. wx.uploadFile({
  9. url: 'https://www.hgdqdev.cn/api/upload2',
  10. filePath: tempFilePaths[0],
  11. name: 'file',
  12. header: {
  13. 'content-type': 'multipart/form-data'
  14. },
  15. success: function (res) {
  16. var data = res.data
  17. console.log(res);
  18. }
  19. })
  20. }
  21. })

这里我也开放我的两个图片上传的接口:

 

				
  1. 【ajax版本】https://www.hgdqdev.cn/api/upload
  2. 【小程序版本】https://www.hgdqdev.cn/api/upload2

这两个接口的使用大家可以看上线的文章,遇见接口不能使用时可以联系我,我开服务器。

服务端的实现

在实现服务端,我们需要使用一个新的模块multer,关于这个模块的使用,大家可以看文档就是了。  代码:

 

				
  1. // 微信小程序 图片上传
  2. var multer = require('multer')
  3. var upload = multer({ dest: './tmp/' })
  4. // 图片上传
  5. router.all('/api/upload2', upload.single('file'), function(req, res, next){
  6. // 文件路径
  7. var filePath = './tmp/' + req.file.filename;
  8. // 文件类型
  9. var fileType = req.file.mimetype;
  10. var lastName = '';
  11. switch (fileType){
  12. case 'image/png':
  13. lastName = '.png';
  14. break;
  15. case 'image/jpeg':
  16. lastName = '.jpg';
  17. break;
  18. default:
  19. lastName = '.png';
  20. break;
  21. }
  22. // 构建图片名
  23. var fileName = Date.now() + lastName;
  24. console.log(req.file);
  25. // 图片重命名
  26. fs.rename(filePath, fileName, (err) => {
  27. if (err) throw err;
  28. // 七牛上传
  29. var putPolicy = new qiniu.rs.PutPolicy(bucket+":" + fileName);
  30. var token = putPolicy.token();
  31. var extra = new qiniu.io.PutExtra();
  32. qiniu.io.putFile(token, fileName, fileName, extra, function(err, ret) {
  33. if(!err) {
  34. // 上传成功, 处理返回值
  35. // ret.key 是图片的名字
  36. var imageSrc = 'http://o9059a64b.bkt.clouddn.com/' + ret.key;
  37. res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc}));
  38. } else {
  39. // 上传失败, 处理返回代码
  40. res.end(JSON.stringify({status:'101',msg:'上传失败',error:ret}));
  41. }
  42. // 上传后删除本地图片
  43. fs.unlinkSync(fileName);
  44. });
  45. });
  46. })

后端代码其实也很简单的。理清思路就好做了。

效果图

这里写图片描述  手机不能搞gif图,就电脑截屏了,这个在微信预览是一样的。



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23753.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询