一、準(zhǔn)備工作
1)配置uploadFile合法域名
2)在做微信小程序的圖片上傳之前我們需要先配置uploadFile的合法域名。這個(gè)可以看之前的文章服務(wù)器配置部分。
二、看小程序文檔
看小程序文檔—wx.uploadFile，看文檔主要是看小程序給的api是怎么使用的。在使用wx.uploadFile之前需要先使用wx.chooseImage(OBJECT)這個(gè)api，因?yàn)槲覀冃枰冗x擇圖片。
三、代碼實(shí)現(xiàn)
1）小程序端的實(shí)現(xiàn)
wx.chooseImage({
count:9,// 默認(rèn)9
sizeType:['original','compressed'],// 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType:['album','camera'],// 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success:function(res){
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的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）服務(wù)端的實(shí)現(xiàn)
// 微信小程序 圖片上傳
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;
}
// 構(gòu)建圖片名
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);
? ? ? ? ? ?});
? ? ? ?});
})
