上传附件——单页面

上传附件——单页面

效果

代码

index.vue

<el-form-item
              v-if='fileListIsShow'
              label='上传附件'
              >
    <el-upload
               :file-list='fileList'
               :http-request='uploadFile'
               :limit='1'
               :on-exceed='exceed'
               :on-remove='handleRemove'
               accept='.pdf, .jpg,.bmp,.png, .doc, .xls, .pptx,.xlsx'
               action='#'
               class='upload-demo'
               >
        <el-button size='small'>
            <i class='el-icon-upload2 el-icon--right'></i>上传附件
        </el-button>
        <template #tip>
<div class='el-upload__tip'>
    支持扩展名： pdf 、jpg、bmp、png、doc、xls、pptx、xlsx
    大小限制 2M
            </div>
        </template>
    </el-upload>
</el-form-item>

<script>
        const state = reactive({
                fileList: [], //附件简历回显使用
                fileListIsShow: true //选择短信时候内容和附件不显示
        });
        const fun = {
            disabledDate(time) {
                return time.getTime() < Date.now()
            },
            // 移除附件
            handleRemove(file, fileList) {
            },
            exceed(file, fileList) {
                ElMessage.warning('最多允许上传一个文件');
            },
            //附件简历上传
            uploadFile: row => {
                let fd = new FormData();
                fd.append('file', row.file);
                fileUpload(fd).then((res: any) => {
                    state.fileList = [];
                    state.resumeParamsVO.url = res.data.path;
                    state.resumeParamsVO.fileName = res.data.fileName;
                    state.fileList.push({
                        name: res.data.fileName,
                        url: res.data.path
                    });
                    
                });
            }, 
        return {
            ...toRefs(state),
            ...fun
        };      
</script>
<style>
:deep(.upload-demo) {
    display: inline-block;
    margin-left: 10px;
}
</style>