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

上传员工头像——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>