微信小程序开发之图片上传

一、准备工作

1)配置uploadFile合法域名

2)在做微信小程序的图片上传之前我们需要先配置uploadFile的合法域名。这个可以看之前的文章服务器配置部分。

二、看小程序文档

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

三、代码实现

1）小程序端的实现

wx.chooseImage({

count:9,// 默认9

sizeType:['original','compressed'],// 可以指定是原图还是压缩图，默认二者都有

sourceType:['album','camera'],// 可以指定来源是相册还是相机，默认二者都有

success:function(res){

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

vartempFilePaths=res.tempFilePaths;

wx.uploadFile({

url:'https://www.hgdqdev.cn/api/upload2',

filePath:tempFilePaths[0],

name:'file',

header:{

'content-type':'multipart/form-data'

           },

success:function(res){

vardata=res.data

console.log(res);

                            }

                 })

              }

})

2）服务端的实现

// 微信小程序 图片上传

varmulter=require('multer')

varupload=multer({dest:'./tmp/'})

// 图片上传

router.all('/api/upload2',upload.single('file'),function(req,res,next){

// 文件路径

varfilePath='./tmp/'+req.file.filename;

// 文件类型

varfileType=req.file.mimetype;

varlastName='';

switch(fileType){

case'image/png':

lastName='.png';

break;

case'image/jpeg':

lastName='.jpg';

break;

default:

lastName='.png';

break;

}

// 构建图片名

varfileName=Date.now()+lastName;

console.log(req.file);

// 图片重命名

fs.rename(filePath,fileName,(err)=>{

if(err)throwerr;

// 七牛上传

varputPolicy=newqiniu.rs.PutPolicy(bucket+":"+fileName);

vartoken=putPolicy.token();

varextra=newqiniu.io.PutExtra();

qiniu.io.putFile(token,fileName,fileName,extra,function(err,ret){

if(!err){

// 上传成功， 处理返回值

// ret.key 是图片的名字

varimageSrc='http://o9059a64b.bkt.clouddn.com/'+ret.key;

res.end(JSON.stringify({status:'100',msg:'上传成功',imageUrl:imageSrc}));

}else{

// 上传失败， 处理返回代码

res.end(JSON.stringify({status:'101',msg:'上传失败',error:ret}));

                 }

// 上传后删除本地图片

fs.unlinkSync(fileName);

           });

       });

})