?

之前在網(wǎng)上看了好多，結(jié)果給的代碼都不全，整了快一天，才整好,心態(tài)都崩了，想砸電腦

這里貼出來(lái)愿后來(lái)人省力?

下面的代碼除了最下面的axios請(qǐng)求需要和自己的匹配之外。其他的可以直接復(fù)制使用了

?

服務(wù)器接口處理函數(shù)

這里只是處理函數(shù)，其余的部分沒(méi)有貼，因?yàn)橐N就要貼很多node服務(wù)器的代碼了

這里有需要提交兩個(gè)參數(shù)，第一個(gè)是需要手動(dòng)上傳的base64格式的字符串，第二個(gè)時(shí)用戶(hù)的id

這里因?yàn)槭钦?qǐng)求用戶(hù)信息成功之后了，本地的token存儲(chǔ)了用戶(hù)id，這里默認(rèn)能檢測(cè)到，就不需要再手動(dòng)上傳了

// 更新用戶(hù)頭像
exports.updateAvatar = (req,res) => {
    // 通過(guò)Id來(lái)進(jìn)行定位更改信息
   const sql = `update ev_users set user_pic=? where id=?`
   db.query(sql,[req.body.avatar,req.user.Id],(err,results) => {
    if(err) return res.cc('更換頭像失敗')
    if(results.affectedRows !== 1) return res.cc('影響多行')
    res.cc('更換頭像成功',0)
   })
}

?vue代碼

如果不需要token驗(yàn)證的話(huà)，可以把:headers="headers"刪掉

標(biāo)數(shù)字的注釋下面的代碼都是需要和自己的后臺(tái)接口匹配的

<template>
    <div>
        <el-upload class="avatar-uploader" accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg" :action="url" list-type="picture"
            :headers="headers" :multiple="false" :show-file-list="false" :http-request="uploadImg">
            <img v-if="imgString" :src="imgString" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i>
        </el-upload>
        <el-button type="primary" size="mini" @click="update_userInfo()">
            確認(rèn)修改</el-button>
    </div>
</template>

<script>
import axios from 'axios'
//配置axios
//1.axios的默認(rèn)根地址
axios.defaults.baseURL = 'http://127.0.0.1:3000'
// axios請(qǐng)求攔截
// 為保證其他的頁(yè)面在每次請(qǐng)求時(shí)都確保是登錄狀態(tài)，便需要攔截器在請(qǐng)求之前加入token令牌，來(lái)讓
// 后臺(tái)知道此時(shí)已經(jīng)登錄
//request為請(qǐng)求，use為回調(diào)函數(shù)
axios.interceptors.request.use(config => {
    // 為請(qǐng)求頭對(duì)象，添加 Token 驗(yàn)證的 Authorization 字段
    config.headers.Authorization = window.sessionStorage.getItem('token')
    return config
})
export default {
    data() {
        return {
            // base64 格式字符串
            imgString: "",
            // 2.圖片上傳路徑
            url: "http://127.0.0.1:3000/my/update/avatar",
            // 圖片上傳頭部信息（如果需要token就需要攜帶頭部信息）
            headers: {
                Authorization: window.sessionStorage.getItem("token"),
            },
        };
    },
    methods: {
        // 轉(zhuǎn)換base64方法時(shí)Promise對(duì)象，必須換成同步
        // 網(wǎng)上還有其它辦法，但是嘗試過(guò)后，這個(gè)方法出錯(cuò)的概率最低
        async uploadImg(file) {
            // 這里不一定是file.file，如果使用的方法不一樣，有的是file.raw
            // 這里傳入的應(yīng)該是組件中攜帶的文件信息
            let base64Str = await this.getBase64(file.file);
            this.imgString = base64Str;
        },
        // 獲取圖片轉(zhuǎn)base64，這里用的是Promise，所以調(diào)用方法時(shí)必須轉(zhuǎn)換成同步（async，await）
        // 否則上傳數(shù)據(jù)時(shí)好時(shí)壞，能不能上傳成功全看運(yùn)氣 ^_^
        getBase64(file) {
            return new Promise(function (resolve, reject) {
                const reader = new FileReader();
                let imgResult = "";
                reader.readAsDataURL(file);
                reader.onload = function () {
                    imgResult = reader.result;
                };
                reader.onerror = function (error) {
                    reject(error);
                };
                reader.onloadend = function () {
                    resolve(imgResult);
                };
            });
        },
        //3.確認(rèn)修改之后上傳修改信息 axios請(qǐng)求
        async update_userInfo() {
            const { data: res } = await axios.post('/my/update/avatar', { avatar: this.imgString })
            console.log(res);
        }
    },
};
</script>

<style scoped lang="less">
// 頭像上傳區(qū)
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    margin: 20px 0 0 20px;
}
</style>

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-569338.html

到了這里，關(guān)于element ui的upload 手動(dòng)上傳頭像（復(fù)制就能用）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！