1. 上傳圖片的流程分析:【選擇文件📁+上傳圖片🎨】
2.1 功能步驟
2.1 頁面基本佈局
基本佈局
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>更換頭像</span>
</div>
<div>
<!-- 圖片,用來展示用戶選擇的頭像 -->
<img src="../../../assets/images/avatar.jpg" alt="" class="preview">
<!-- 按鈕區域 -->
<div class="btn-box">
<!-- accept: 當前文件選擇框可以接受的文件類型 -->
<input type="file" accept="image/*" ref="inp" name="" id="" style="display: none">
<el-button type="primary" @click="$refs.inp.click()" icon="el-icon-circle-plus-outline">選擇圖片</el-button>
<el-button type="success" icon="el-icon-upload" :disabled="true">上傳圖片</el-button>
</div>
</div>
</el-card>
</template>
2.2 綁定點擊事件
2.3 選擇文件
accept="image/*" 是可以選擇索引圖片 格式,可以選擇其他類型
2.4 轉換base64圖片格式
<input @click="changeFile" type="file" accept="image/*" ref="inp" name="" id="" style="display: none">
綁定事件@click="changeFile"可以實現base64圖片轉換,渲染圖片或提交圖片的時候都需要用base64格式
獲取上傳圖片信息: const files = e.target.files
>創建 FileReader 對象
>讀取文件轉成 BASE64
>監聽事件, 得到結果:必須使用箭頭函數
轉換base64格式方法
data () {
return {
avatar:''
}
},
methods: {
changeFile (e) {
// 我要一個 Object, 可以傳入一個 Array
// Blob 是父類對象 File 是子類對象
// files
// console.log(e.target.files[0])
// this.avatar = e.target.files[0]
const files = e.target.files
if (files.length > 0) {
// this.avatar = e.target.files[0]
// files[0] : 是一個對象
// 目標: 將這個對象轉成 BASE64 格式的字符串
// FileReader 文件讀取器
// 1. 創建 FileReader 對象
const fr = new FileReader()
// 2. 讀取文件轉成 BASE64
fr.readAsDataURL(files[0])
// 3. 監聽事件, 得到結果
// 必須使用箭頭函數
fr.onload = (e) => {
// console.log(e.target.result)
this.avatar = e.target.result
}
} else {
this.avatar = ''
}
},
2.5 圖片渲染
console.log(e.target.result) 轉換成功後的base64圖片信息,點擊取消可以返回原來的默認值
3. 上傳提交~
提交按鈕綁定事件
提交
// 點擊提交
async upload(){
// 1.發送請求
const {data:res}= await this.$http.patch('/my/update/avatar',{avatar:this.avatar})
// 2.根據結果提示用戶
if (res.code !== 0) return this.$message.error(res.message)
this.$message.success(res.message)
// 3.重新獲取用戶信息
await this.$store.dispatch('user/getUserInfo')
}
4. 完整的項目展示
完整的code
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>更換頭像</span>
</div>
<div>
<!-- 圖片,用來展示用戶選擇的頭像 -->
<img v-if="avatar" :src="avatar" alt="" class="preview" />
<img v-else src="../../../assets/images/avatar.jpg" alt="" class="preview" />
<!-- 按鈕區域 -->
<div class="btn-box">
<!-- accept: 當前文件選擇框可以接受的文件類型 -->
<!-- MIME_TYPE: application/json text/plain text/html text/css Content-Type: application/json -->
<!-- 爲什麼 MIME Type 會出現? 使用 http 協議在互聯網上通信, 只支持兩種格式的數據: 文本 / 二進制 -->
<!-- 用於標識在互聯網上傳輸的文件類型 -->
<input @change="changeFile" accept="image/*" ref="inp" style="display: none" type="file">
<el-button @click="$refs.inp.click()" type="primary" icon="el-icon-plus">選擇圖片</el-button>
<el-button @click="upload" type="success" icon="el-icon-upload" :disabled="!avatar">上傳頭像</el-button>
</div>
</div>
</el-card>
</template>
<script>
export default {
name: 'UserAvatar',
data () {
return {
avatar: ''
}
},
methods: {
changeFile (e) {
// 我要一個 Object, 可以傳入一個 Array
// Blob 是父類對象 File 是子類對象
// files
// console.log(e.target.files[0])
// img 標籤的 src 屬性只能設置兩種值:
// URL 和 BASE64 (Data URL)
// this.avatar = e.target.files[0]
const files = e.target.files
if (files.length > 0) {
// this.avatar = e.target.files[0]
// files[0] : 是一個對象
// 目標: 將這個對象轉成 BASE64 格式的字符串
// FileReader 文件讀取器
// 1. 創建 FileReader 對象
const fr = new FileReader()
// 2. 讀取文件轉成 BASE64
fr.readAsDataURL(files[0])
// 3. 監聽事件, 得到結果
// 必須使用箭頭函數
fr.onload = (e) => {
console.log(e.target.result)
this.avatar = e.target.result
}
} else {
this.avatar = ''
}
},
// 點擊提交
async upload(){
// 1.發送請求
const {data:res}= await this.$http.patch('/my/update/avatar',{avatar:this.avatar})
// 2.根據結果提示用戶
if (res.code !== 0) return this.$message.error(res.message)
this.$message.success(res.message)
// 3.重新獲取用戶信息
await this.$store.dispatch('user/getUserInfo')
}
}
}
</script>
<style lang="less" scoped>
.btn-box {
margin-top: 10px;
}
.preview {
object-fit: cover;
width: 350px;
height: 350px;
}
</style>
vuexstore/user
// 引入axios
import axios from 'axios'
export default {
namespaced: true,
state: () => ({
// token: localStorage.getItem('token')
token: '',
userInfo: {},
}),
mutations: {
updateToken (state, token) {
state.token = token
// 存入 localStorage
// localStorage.setItem('token', token)
},
updateUserInfo(state,userInfo){
state.userInfo = userInfo
}
},
actions: {
async getUserInfo (context) {
// console.log(context.state.token)
// this.$http.get('my/userInfo')
// console.log(this)
// get 第一個參數是 url
// 第二個參數是 config 配置對象
// 配置對象中有一個設置請求頭的屬性: headers
const {data:res } = await axios.get('my/userInfo')
// console.log(res.data)
context.commit('updateUserInfo',res.data)
}
},
getters: {}
}