Vue el-upload 文件上传封装

<template>
    <div>
        <el-upload 
            :headers="headers" 
            :action="url" 
            :on-success="uploadSuccess" 
            :on-error="uploadError" 
            :data="postData" 
            :before-upload="beforeUpload" 
            :file-list="fileList" 
            :show-file-list="showFileList" 
            :on-preview="handlePreview" 
            :on-remove="handleRemove">
            <el-button size="mini" type="primary">{{ title }}</el-button>
        </el-upload>
    </div>
</template>

<script>
import { getUplaodSign } from '@/api/tool';
import { Message } from 'element-ui';
export default {
    props: {
        // upload 按钮名称
        title: {
            type: String,
            default: '文件上传'
        },
        // 允许选择的类型 | 如 .png,jpg,.pdf
        allowedType: {
            type: Array,
            default: () => {
                return [];
            }
        },
        isOrigin: {
            type: Boolean,
            default: false
        },
        // 是否显示 filelist
        showFileList: {
            type: Boolean,
            default: true
        },
        // 文件列表 | 这个是来自于 父组件
        fileList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            // 请求 header 头参数
            headers: {},
            // 上传地址
            url: '',
            dir: '',
            // 上传参数
            postData: {
                token: null,
                key: ''
            },
            loadding: false
        };
    },
    methods: {
        /**
         * 上传成功事件
         */
        uploadSuccess(response, file) {
            this.loadding = false;
            Message.success('上传成功');
            let url = this.host + response.key;
            this.fileList = this.fileList.concat({
                name: file.name,
                url: url
            });
            this.$emit('update:fileList', this.fileList);
        },

        /**
         * 上传失败事件
         */
        uploadError(error) {
            let msg = JSON.parse(err.message);
            Message.error('上传失败: ' + msg);
            this.loadding = false;
        },

        /**
         * 限制文件名称
         * 可以在这里进行校验文件是否符合要求
         * 不符合要求则返回false
         */
        beforeUpload(file) {},

        /**
         * 初始化上传信息
         */
        initUploadInfo() {
            getUplaodSign({ is_origin: this.isOrigin == true ? 1 : 0 }).then(({ data }) => {
                this.url = data.uploadUrl;
                this.host = data.host;
                this.postData = {
                    token: data.token
                };
            });
        },

        /**
         * 获取已上传的文件
         */
        getFileList() {
            return this.fileList;
        },

        handlePreview(file) {
            window.open(file.url);
        },

        handleRemove(file, fileList) {
            this.fileList = this.fileList.filter(current => {
                return current.name !== file.name;
            });
        }
    },

    mounted() {
        this.initUploadInfo();
    }
};
</script>

<style></style>

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Aug 24, 2021 at 09:29 am