上传员工头像——el-upload组件的使用

最新推荐文章于 2024-07-04 15:09:47 发布

原创最新推荐文章于 2024-07-04 15:09:47 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue3+ts-运维专栏收录该内容

87 篇文章

订阅专栏

这篇博客介绍了如何在Vue中利用el-upload组件实现员工头像上传功能。通过设置http-request属性自定义上传逻辑，展示上传前后的图片，并且限制了文件大小。上传成功后，图片路径会更新到数据模型中。

上传员工头像——el-upload组件的使用

效果

在这里插入图片描述

代码

index.vue

<el-upload
    ref='fileUploadRef'
    :disabled='isDisabled'
    :http-request='uploadFileImage'
    :show-file-list='false'
    action='#'
    class='el-upload-input uploadclass'
    list-type='picture-card'
>
    <img
        v-if='ruleForm.imgUrl'
        :src='ruleForm.imgUrl'
        class='avatarImgHeadUrl'
    />
    <b v-if='!ruleForm.imgUrl'
    ><i class='el-icon-plus2'></i
    >上传员工照片</b
    >
    <b v-if='!ruleForm.imgUrl'>限制50kb</b>
</el-upload>

<script>
const state = reactive({
       ruleForm: {
          imgUrl: require('@/assets/images/baseimgUrl.png'),//默认图片
       }
}）

const fun = {
      // 回显数据
      dataisShow() {
           state.ruleForm.imgUrl = state.ruleForm.imgUrl ? state.ruleForm.imgUrl : require('@/assets/images/baseimgUrl.png')
       }
 }
                       
                       
   //方法-用户头像上传
    uploadFileImage(row) {
        let fd = new FormData();
        fd.append('file', row.file);
        fileUpload(fd).then((res: any) => {
            state.ruleForm.imgUrl = '';
            if (res.code === 200) {
                state.ruleForm.imgUrl = res.data.accessPath;
            }
        });
    },
</script>