一、准备工作
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);
});
});
})
网友评论