elementui上传组件,文件展示列表自定义为表格展示_vue el-tabel 表格显示上传的文件

作者：繁依Fanyi0 | 2024-02-20 02:34:36

踩

vue el-tabel 表格显示上传的文件

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

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

效果图

在这里插入图片描述

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

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
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/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
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

使用(父组件)

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/117992?site