一、頭像縮略圖轉(zhuǎn)base64
效果：
1[00-00-05][20230427-024733912].jpg
1心包、選擇圖片
<!-- 圖片 -->
<div>
<el-upload
class="avatar-uploader"
action="#"
:auto-upload="false"
:on-change="imgPreview"
>
<img v-if="ppicture" :src="ppicture" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
</div>
2类咧、vue轉(zhuǎn)換
//圖片
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
let ppicture = ref("");
//圖片轉(zhuǎn)base64
const base64Image = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = (e) => {
console.log(e);
resolve(reader.result);
};
reader.onerror = (error) => reject(error);
});
};
//選完圖片
const imgPreview = async (file) => {
let base64 = await base64Image(file);
ppicture.value = base64;
console.log("ggg", ppicture.value);
};
二、格式化男女
普通
<div><span>性別：{{ sexFormate(user.usex) }}</span></div>
//格式化男女
function sexFormate(row) {
if (row == 1) {
return "男";
} else if (row == 0) {
return "女";
}
}
表格
<!-- 表格 -->
<el-table :data="tableData">
<el-table-column type="selection" />
<el-table-column type="index" />
<el-table-column prop="usex" label="用戶性別" :formatter="sexFormate" />
</el-table>
//格式化男女
function sexFormate(row) {
if (row.usex == 1) {
return "男";
} else if (row.usex == 0) {
return "女";
}
}
三谴咸、表格格式化日期
<!-- 表格 -->
<el-table :data="tableData">
<el-table-column prop="createdTime"
label="創(chuàng)建時間" :formatter="dateFormat" />
</el-table>
import moment from "moment";
//格式化時間
function dateFormat(row) {
return moment(new Date(row.createdTime).getTime()).format("YYYY/MM/DD");
}
