vue3头像上传组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3头像上传组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3头像上传组件

用到了自定义组件v-model的双向绑定
使用input的type=file这个原生html元素，通过监听change事件，获取到选择的文件（注意，选择完文件值后，要把这个隐藏的input的type=file元素的value置为空，否则，下次选择同样的图片，将不会触发change事件）
使用axios + formData 上传文件
后台做保存文件，以及静态资源目录映射即可

前端

AvatarUpload.vue

<template>

    <div class="avatar-upload-wrapper">
    
        <!-- {{ modelValue }} -->
        
        <div :class="['avatar-box',{'avatar-box-border':imgUrl?false:true}]" @click="clickAvatarBox" :style="{width: size + 'px',height: size + 'px'}">
        
        	<!-- 隐藏的input的type=file -->
            <input type="file" hidden ref="fileInputRef" accept="image/x-png,image/gif,image/jpeg,image/bmp" @change="changeFile">
            
            <img v-if="imgUrl" :src="imgUrl" alt="">
            
            <div v-else class="avatar-marker">
                <i class="iconfont icon-jiahao"></i>
            </div>
            
        </div>
    </div>
    
</template>

<script setup>
    import Messager from '@/utils/messager'
    import axiosInstance from '@/utils/request'

    import { ref,reactive,watch } from 'vue'
    const emits = defineEmits(['update:modelValue'])
    const props = defineProps({
        size: {
            type: Number,
            default: 64
        },
        modelValue: {
            type: String,
            default: '' // 默认头像链接地址
        },
        maxSize: {
            type:Number,
            default: 5 // 默认最大不超过5M
        },
        serverUrl: {
            type:String,
            default: 'http://localhost:9091/static/img'
        } 
    })

    const fileInputRef =ref(null)
    // const imgUrl = ref('http://localhost:9091/static/img/avatar/3026520210706112210298.png')
    const imgUrl = ref(props.modelValue)
    // console.log(imgUrl.value);
    // 监听头像url改变（打开弹框时, 传入的图片地址变化时, 同步修改imgUrl）
    watch(()=>props.modelValue,(newVal,oldVal)=>{
        imgUrl.value = newVal
    })

    function clickAvatarBox() {
        fileInputRef.value.click()
    }

    function changeFile() {
        console.log(123,fileInputRef.value.files[0].size);
        // 获取更改后的文件
        let file = fileInputRef.value.files[0]
        // 校验文件大小
        if(file.size / 1024 / 1024 > props.maxsize) {
            Messager.error('文件超过指定大小')
        } 
        // 执行文件上传
        let formData = new FormData()
        formData.append("mfile", file)
        formData.append("type", "avatar")
        
        let config = {
            headers: {
                'Content-Type': 'multipart/form-data',
                'a':'b' // 随便自己带个什么请求头
            }
        } // 这个config可以不必携带, 当使用FormData传参时, 
          // axios会自己带上'Content-Type': 'multipart/form-data',请求头
        
        axiosInstance.post('/file/uploadFile',formData,config ).then(res=>{
            console.log(res,'上传成功');
            imgUrl.value = props.serverUrl + res
            let img = new Image()
            img.src = imgUrl.value
            img.onload = ()=>{
                emits('update:modelValue', imgUrl.value)
            }
        })
    }

</script>

<style lang="scss" scoped>

    .avatar-box-border {
        border: 1px dashed #409eff !important;
    }
    .avatar-box {
        border-radius: 50%;
        margin-left: 20px;
        cursor: pointer;
        position: relative;
        border: 2px solid #eee;
        overflow: hidden;
        &:hover::before {
            content:'';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.03);
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .avatar-marker {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409eff;
            i.iconfont {
                font-size: 24px;
            }
        }
    }
</style>

使用AvatarUpload.vue

<el-dialog v-model="userDialogVisible" width="450">
   <el-form :model="userForm" :rules="userFormRules" label-width="80">
        <el-form-item label="昵称" prop="nickname">
            <el-input v-model="userForm.nickname" style="width: 300px;"></el-input>
        </el-form-item>
        
        <!-- 使用头像上传组件 -->
        <el-form-item label="头像" prop="avatar">
            <avatar-upload v-model="userForm.avatar" />
        </el-form-item>


        <el-form-item label="个性签名" prop="bio">
            <el-scrollbar>
                <el-input type="textarea" :rows="3" v-model="userForm.bio" style="width: 300px;"></el-input>
            </el-scrollbar>
        </el-form-item>
        <el-form-item label="网站链接" prop="website">
            <el-input v-model="userForm.website" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" prop="disabled">
            <el-switch v-model="userForm.disabled" :active-value="0" :inactive-value="1" active-color="#13ce66"
                inactive-color="#eaecf0">
            </el-switch>
        </el-form-item>
        <el-form-item>
            <div style="margin-left: auto;">
                <el-button @click="userDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSave">确定</el-button>
            </div>
        </el-form-item>
    </el-form>
</el-dialog>

后端

上传接口

@PostMapping("uploadFile")
public Result<String> uploadFile(@RequestParam("mfile") MultipartFile mfile, String type) {
    return Result.ok(fileService.saveFile(mfile,type));
}

@Override
public String saveFile(MultipartFile mfile, String type) {

    String filePath = FilePathEnum.type(type).getPathPrefix() + SnowflakeIdWorker.generateId().substring(0, 8) + mfile.getOriginalFilename();

    String targetFilePath = fileSavePath + filePath;

    try {
        mfile.transferTo(new File(targetFilePath));
    } catch (IOException e) {

        throw BizException.SAVE_FILE_ERR;
    }

    return filePath;
}

配置mvc文章来源地址https://www.toymoban.com/news/detail-431712.html

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**")
                .addResourceLocations("file:D:\\Projects\\boot-blog\\src\\main\\resources\\static\\");
    }
}