|
在之前的博客《Node.js+express+MySQL使用七牛云實(shí)現(xiàn)的用戶頭像修改》,已經(jīng)實(shí)現(xiàn)了在MUI框架或者《 Ajax實(shí)現(xiàn)圖片上傳》。之前都是使用Node.js寫的一個(gè)后臺(tái)接口，就可以使用ajax上傳了，在MUI框架中的mui.ajax其實(shí)還是ajax。在《Node.js+express+MySQL使用七牛云實(shí)現(xiàn)的用戶頭像修改》我已經(jīng)詳細(xì)的說了怎么配置七牛了，這里不再說明。
準(zhǔn)備工作
配置uploadFile合法域名
在做微信小程序的圖片上傳之前我們需要先配置uploadFile的合法域名。這個(gè)可以看《微信小程序開發(fā)(一)新建小程序項(xiàng)目》的服務(wù)器配置部分。
看小程序文檔
看小程序文檔—wx.uploadFile，看文檔主要是看小程序給的api是怎么使用的。在使用wx.uploadFile之前需要先使用wx.chooseImage(OBJECT)這個(gè)api，因?yàn)槲覀冃枰冗x擇圖片。
代碼實(shí)現(xiàn)
有了上面的準(zhǔn)備工作后我們就可以實(shí)際操作了。
小程序端的實(shí)現(xiàn)
小程序端的實(shí)現(xiàn)其實(shí)很簡(jiǎn)單，一個(gè)事件去出發(fā)選擇上傳操作。
-
wx.chooseImage({
-
count: 9, // 默認(rèn)9
-
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
-
sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
-
success: function (res) {
-
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
-
var tempFilePaths = 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) {
-
var data = res.data
-
console.log(res);
-
}
-
})
-
}
-
})
這里我也開放我的兩個(gè)圖片上傳的接口:
-
【ajax版本】https://www.hgdqdev.cn/api/upload
-
【小程序版本】https://www.hgdqdev.cn/api/upload2
這兩個(gè)接口的使用大家可以看上線的文章，遇見接口不能使用時(shí)可以聯(lián)系我，我開服務(wù)器。
服務(wù)端的實(shí)現(xiàn)
在實(shí)現(xiàn)服務(wù)端，我們需要使用一個(gè)新的模塊multer,關(guān)于這個(gè)模塊的使用，大家可以看文檔就是了。 代碼：
-
// 微信小程序 圖片上傳
-
var multer = require('multer')
-
var upload = multer({ dest: './tmp/' })
-
// 圖片上傳
-
router.all('/api/upload2', upload.single('file'), function(req, res, next){
-
// 文件路徑
-
var filePath = './tmp/' + req.file.filename;
-
// 文件類型
-
var fileType = req.file.mimetype;
-
var lastName = '';
-
switch (fileType){
-
case 'image/png':
-
lastName = '.png';
-
break;
-
case 'image/jpeg':
-
lastName = '.jpg';
-
break;
-
default:
-
lastName = '.png';
-
break;
-
}
-
// 構(gòu)建圖片名
-
var fileName = Date.now() + lastName;
-
console.log(req.file);
-
// 圖片重命名
-
fs.rename(filePath, fileName, (err) => {
-
if (err) throw err;
-
// 七牛上傳
-
var putPolicy = new qiniu.rs.PutPolicy(bucket+":" + fileName);
-
var token = putPolicy.token();
-
var extra = new qiniu.io.PutExtra();
-
qiniu.io.putFile(token, fileName, fileName, extra, function(err, ret) {
-
if(!err) {
-
// 上傳成功， 處理返回值
-
// ret.key 是圖片的名字
-
var imageSrc = '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);
-
});
-
});
-
})
后端代碼其實(shí)也很簡(jiǎn)單的。理清思路就好做了。
效果圖
這里寫圖片描述 手機(jī)不能搞gif圖，就電腦截屏了，這個(gè)在微信預(yù)覽是一樣的。
|
