摘要：我相信很多使用的朋友，都有采用上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用來(lái)解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁(yè)面跳轉(zhuǎn)，而使用能夠無(wú)刷新上傳圖片等文件。
我相信很多使用vuejs的朋友，都有采用ajax上傳圖片的需求，因?yàn)榍昂蠖朔蛛x后，我們希望都能用ajax來(lái)解決數(shù)據(jù)問題，傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁(yè)面跳轉(zhuǎn)，而使用ajax能夠無(wú)刷新上傳圖片等文件。
其實(shí)已經(jīng)有朋友封裝了相關(guān)的npm包，但是我想說(shuō)用原生的js api來(lái)實(shí)現(xiàn)，也用不了多少代碼，而且更靈活，能使用原生就盡量用原生。接下來(lái)就以一個(gè)簡(jiǎn)單的頭像上傳來(lái)說(shuō)明如何使用。
效果圖
前端實(shí)現(xiàn)
解釋一下上面代碼的意思，當(dāng)我們點(diǎn)擊圖片會(huì)觸發(fā)setAvatar函數(shù)，該函數(shù)會(huì)觸發(fā)input的click事件，于是就會(huì)彈出文件選擇框，當(dāng)我們選擇了一張圖片后，觸發(fā)chageImage函數(shù)，這個(gè)函數(shù)的功能就是預(yù)覽你上傳的圖片，單后當(dāng)我們點(diǎn)擊修改按鈕后，就會(huì)把資源傳到后端
后端處理
后端接收到你上傳的資源，肯定要把資源保存到服務(wù)器，我就以Nodejs來(lái)說(shuō)明，我使用formidable解析上傳的數(shù)據(jù)
exports.avatar = function(req, res, next) {
let form = new formidable.IncomingForm()
form.parse(req, function(err, fields, files) {
if (err) {
return res.json({
"code": 500,
"message": "內(nèi)部服務(wù)器錯(cuò)誤"
})
}
// 獲取后綴名
let extname = path.extname(files.avatar.name)
let oldpath = files.avatar.path;
let newpath = "./public/avatar" + extname;
let avatarName = "avatar" + extname;
// 更改名字和路徑
fs.rename(oldpath, newpath, function(err) {
if (err) {
return res.json({
"code": 401,
"message": "圖片上傳失敗"
})
}
})
// 更新數(shù)據(jù)庫(kù)
db.updateMany("users", { "user": username }, { "avatar": avatarName },
function(err, result) {
if (err) {
return res.json({
"code": 401,
"message": "頭像更新失敗"
})
}
return res.json({
"code":200,
"message": "頭像上傳成功"
})
})
})
}
后端解析ajax提交的數(shù)據(jù)和解析采用傳統(tǒng)表單提交的數(shù)據(jù)方法一樣，如果你是做前端開發(fā)的，不了解后端代碼影響不大。
說(shuō)這么多，還是來(lái)個(gè)demo吧，https://github.com/wmui/vueblog，這個(gè)小項(xiàng)目后臺(tái)有個(gè)頭像修改的功能，是使用ajax上傳圖片的，核心代碼百行不到，前后端分離。
在這里挺感謝sf和掘金的朋友的，開源此項(xiàng)目半月左右，收到200多個(gè)star，人生第一次這么輝煌。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84708.html
