elementui上传组件,文件展示列表自定义为表格展示

于 2020-06-08 20:52:50 发布
阅读量1.4w 收藏 35
点赞数 11
分类专栏： VUE # elementui 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shuaigg001/article/details/106628410
版权
本文介绍如何使用ElementUI的上传组件实现文件列表的自定义表格展示，包括文件名称、上传人、上传时间等信息，并提供下载和删除操作。通过Vue组件的方式，实现了文件上传的限制检查和后端接口的调用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

elementui上传组件,文件展示自定义为表格展示

业务需要上传文件列表,所以采用自定义上传,删除为只删除数组数据,不调用接口,不使用elementui自带的文件列表

效果图

在这里插入图片描述

  1. uploadFiles.vue(上传子组件)

    <!-- 费用报销编辑弹框 -->
<template>
    <div class="uploadFils">
        <el-upload
            class="upload-demo"
            action
            :http-request="fileupload"
            :before-upload="beforeAvatarUpload"
            :show-file-list="false"
        >
            附件
            <el-button size="small" type="primary" style="margin:5px">点击上传</el-button>
        </el-upload>

        <el-table :data="newList" border stripe style="width: 100%">
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column prop="uploadUserName" label="上传人"></el-table-column>
            <el-table-column prop="createTime" label="上传时间">
                <template
                    slot-scope="scope"
                >{{scope.row.createTime|formatDate(scope.row.createTime)}}</template>
            </el-table-column>
            <el-table-column width="80px">
                <template slot-scope="scope">
                    <el-button size="small" type="text">
                        <a :href="scope.row.fileUrl">下载</a>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column width="80px" v-if="isShowDel">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="deleteButton(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    
    </div>
</template>

<script>
//上传url
import config from '../../../utils/config';
//上传方法
import { fileUpload } from '../../../api/index';
//api 公共方法
import appMain from '../../../utils/app_main';

export default {
    props: {
        //文件列表
        files: {
            type: Array,
            default: () => []
        },
        //是否展示删除列(默认显示删除列,可自定义)
        isShowDel: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            actionUrl: config.url.uploadFiles,
            newList: []
        };
    },
    methods: {
        //上传前判断
        beforeAvatarUpload(file) {
            //文件数量判断
            const isLt5 = this.newList.length < 5;
            if (!isLt5) {
                this.$message.error('上传文件数量不能超过 5 个!');
            }
            //大小判断
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error('上传文件大小不能超过 10MB!');
            }
            return isLt5 && isLt10M;
        },
        //根据索引删除文件列表中的文件
        deleteButton(index) {
            this.newList.splice(index, 1);
        },
        //上传文件
        fileupload(file) {
            fileUpload(file, this.actionUrl).then(res => {
                if (res.code === 20000) {
                    this.newList.push(res.data);
                } else {
                    this.$message.error('服务器繁忙，请稍后再试');
                }
            });
        }
    },
    watch: {
        //监听文件列表
        newList: function(newVal, oldVal) {
            this.$emit('fun', { backData: this.newList });
        }
    },
    filters: {
        //时间过滤器
        formatDate: function(val) {
            let date = new Date(val);
            return appMain.formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        }
    },
    computed: {},
    created() {
        //父组件传递过来的附件数组
        this.newList = this.files;
    }
};
</script>

<style scoped>
.uploadFils {
    width: 100%;
    margin-top: 20px;
    border: 1px solid #666;
    padding: 4px;
    min-height: 100px;
    box-sizing: border-box;
}
.mt20 {
    margin-top: 20px;
}
</style>

  2. utils/config(config.js)

    let devBase = '10.411.12';
let mock = 'http://yapi.secby.cn/mock/19'
let porBase = "https://www.abc123.com"

let isDev = 0; // 1为测试环境，2为生产环境
let base = ''
if (isDev === 0) {
    base = mock
} else if (isDev === 1) {
    base = devBase
} else if (isDev === 2) {
    base = ''
} else {
    base = devBase
}

// 请求接口
let url = {
    // 上传
    uploadFile: base + '/file/service/oss/upload', // 上传图片（返回文件访问路径）
    uploadFiles: base + '/file/service/oss/upload/return/result', // 上传文件（uploadFile）
}



export default {
    isDev: isDev,
    url: url
};

  3. /api/index’(index.js)

    import request from '../utils/request';

/**
 * 自定义上传
 * @param {*} fileobj 
 */
export function fileUpload(fileobj, url) {
    let param = new FormData();
    // 上传文件对象 名称file与后台控制器参数要一致
    param.append('file', fileobj.file);
    return request({
        method: 'post',
        // 上传地址
        url: url,
        // 定义上传头
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: param
    });
}

  4. /utils/app_main(app_main.js)

    class appMain {
    constructor() {
        this.jsonHeader = {
            'content-type': "application/json"
        }
        this.uploadHeadr = {
            'content-type': "multipart/form-data"
        }
    }

    // 时间格式化
    formatDate(date, fmt) {
        var date = new Date(date)
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        let o = {
            'M+': date.getMonth() + 1,
            'd+': date.getDate(),
            'h+': date.getHours(),
            'm+': date.getMinutes(),
            's+': date.getSeconds()
        };
        for (let k in o) {
            if (new RegExp(`(${k})`).test(fmt)) {
                let str = o[k] + '';
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
            }
        }
        return fmt;
    };
    padLeftZero(str) {
        return ('00' + str).substr(str.length);
    }

}
export default new appMain()

  5. 使用(父组件)

    <template>
    <div>
			<!-- 上传子组件 -->
            <upload-files :files="fileList" @fun="dealFiles"></upload-files>
    </div>
</template>


<script>
import uploadFiles from '../../../components/common/pageItem/uploadFiles';
      data() {
        return {
             fileList: [
                {
                    fileName: 'thumb-1920-54542.jpg', //文件名
                    fileType: '1', //文件类型名称
                    fileUrl:
                        'http://secby-oss.oss-cn-shenzhen.aliyuncs.com/www.cjkj100.com/image/jpeg/2020-05-25/20200525/1264830429576298496.jpg?Expires=2536474048&OSSAccessKeyId=LTAI4Fme6bjxGpwEYf4KepQT&Signature=wi9vfYzQTcMi0XM4Az6zz3qVad4%3D', //文件所在地址
                    uploadUserId: '1', //文件上传人员ID
                    createTime: '2020-06-08T11:30:37.846+0000',
                    uploadUserName: '上传人员' //文件上传人员名字
                },
                {
                    fileName: 'thumb-1920-54542.jpg', //文件名
                    fileType: '1', //文件类型名称
                    fileUrl:
                        'http://secby-oss.oss-cn-shenzhen.aliyuncs.com/www.cjkj100.com/image/jpeg/2020-05-25/20200525/1264830429576298496.jpg?Expires=2536474048&OSSAccessKeyId=LTAI4Fme6bjxGpwEYf4KepQT&Signature=wi9vfYzQTcMi0XM4Az6zz3qVad4%3D', //文件所在地址
                    uploadUserId: '1', //文件上传人员ID
                    createTime: '2020-06-08T11:30:37.846+0000',
                    uploadUserName: '上传人员' //文件上传人员名字
                }
            ]
        }
      },
    methods: {
         // 上传文件返回
        dealFiles(data) {
            console.log('dealFiles:' + data);
            this.fileList = data.backData;
            console.log('dealFiles-list:' + this.fileList);
        }
    },
    components: {
        uploadFiles
    } 
</script>


<style  scoped>
.container {
    padding-bottom: 50px;
}
.handle-box {
    padding: 5px 50px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;

    z-index: 1;
}
</style>
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值