vue實現(xiàn)頭像上傳功能

更新時間：2022年07月05日 13:39:53 作者：Magic林

這篇文章主要為大家詳細介紹了vue實現(xiàn)頭像上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)頭像上傳的具體代碼，供大家參考，具體內(nèi)容如下

1.創(chuàng)建項目，使用vue-admin-template框架

2.使用vue命令在終端（開發(fā)工具VScode）輸入npm install,即可按package.json文件下載

3.導入相關(guān)工具包，是上傳頭像的樣式更好看

4.在views編寫vue文件

<template>
? <div class="app-container">
? ? ? <el-form-item label="講師頭像">
? ? ? ? ? <el-upload
? ? ? ? ? ? ? ? ? ? ?:show-file-list="true"
? ? ? ? ? ? ? ? ? ? ?:on-success="handleAvatarSuccess"
? ? ? ? ? ? ? ? ? ? ?:on-error="handleAvatarError"
? ? ? ? ? ? ? ? ? ? ?:before-upload="beforeAvatarUpload"
? ? ? ? ? ? ? ? ? ? ?class="avatar-uploader"
? ? ? ? ? ? ? ? ? ? ?:action="BASE_API+'/eduOss/fileOss'">
? ? ? ? ? ? ? <img v-if="teacher.avatar" :src="teacher.avatar">
? ? ? ? ? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"/>
? ? ? ? ? </el-upload>
? ? ? </el-form-item>
? ? ? <span style="margin-left: 8.7%;font-size: 20px; font-weight: 400;">*點擊圖片框修改頭像*</span>
? ? ? <br /><br /><br />
? ? ? <el-form-item>
? ? ? ? <el-button :disabled="saveBtnDisabled" plain="true" type="primary" @click="saveOrUpdate">保存</el-button>
? ? ? </el-form-item>
? ? </el-form>
? </div>
</template>

<script>

? //引入上傳頭像的功能組件
? import ImageCropper from '@/components/ImageCropper'
? import PanThumb from '@/components/PanThumb'

? export default {
? ? components: {ImageCropper,PanThumb}, //組件的聲明
? ? data() {
? ? ? return {
? ? ? ??
? ? ? ? }, //v-model雙向綁定
? ? ? ? imagecropperShow: false, //上傳彈框組件是否顯示
? ? ? ? imagecropperKey: 0, //上傳組件唯一標識
? ? ? ? BASE_API: process.env.BASE_API, //獲取dev.env.js里面地址
? ? ? ? saveBtnDisabled: false //保存按鈕是否禁用
? ? ? }
? ? },
? ? created() { //頁面渲染前執(zhí)行
? ? ?
? ? },
? ? watch: { ?//vue的監(jiān)聽
? ? ? ? $route(to, from) { ?//路由變化方式，路由一發(fā)生變化 就執(zhí)行方法
? ? ? ? ? this.init()
? ? ? ? }
? ? ? },
? ? methods: {
? ? ? // 文件上傳成功
? ? ? handleAvatarSuccess(response) {
? ? ? ? if (response.success) {
? ? ? ? ? this.teacher.avatar = response.data.url
? ? ? ? ? // 強制重新渲染
? ? ? ? ? this.$forceUpdate()
? ? ? ? } else {
? ? ? ? ? this.$message.error('上傳失敗! （非20000）')
? ? ? ? }
? ? ? },

? ? ? // 文件上傳失?。╤ttp）
? ? ? handleAvatarError() {
? ? ? ? this.$message.error('上傳失敗! （http失敗）')
? ? ? },

? ? ? // 上傳校驗
? ? ? beforeAvatarUpload(file) {
? ? ? ? const isJPG = file.type === 'image/jpeg'
? ? ? ? const isLt3M = file.size / 1024 / 1024 < 3

? ? ? ? if (!isJPG) {
? ? ? ? ? this.$message.error('上傳頭像圖片只能是 JPG 格式!')
? ? ? ? }
? ? ? ? if (!isLt3M) {
? ? ? ? ? this.$message.error('上傳頭像圖片大小不能超過 2MB!')
? ? ? ? }
? ? ? ? return isJPG && isLt3M
? ? ? },
? ? }
? }
</script>

<style>
? .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 .avatar-uploader-icon {
? ? font-size: 28px;
? ? color: #8c939d;
? ? width: 178px;
? ? height: 178px;
? ? line-height: 178px;
? ? text-align: center;
? }
? .avatar-uploader img {
? ? width: 178px;
? ? height: 178px;
? ? display: block;
? }
</style>

該代碼是上傳文件頭像的前端代碼的片段，樣式和上傳到頁面功能，上傳到阿里云服務器還需要和后端功能連接，比如添加時，后端將上傳文件的url拼成字符串保存到數(shù)據(jù)庫，在前端則要寫入相關(guān)保存功能，連接后端，并在data中寫保存的相關(guān)數(shù)據(jù)，methods中寫保存的方法等，該代碼可以在實現(xiàn)需要上傳頭像文件是加如個人代碼進行修改即可.
使用環(huán)境是node.js

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: