Vue 上传图片/附件组件代码

约定不等于承诺〃 2022-11-12 08:30 259阅读 0赞

<template>
        <div>
            <el-upload
                ref="el-upload"
                drag
                :action="action"
                :show-file-list="showUploadList"
                :data="data"
                :before-upload="handleUploadBefore"
                :max-size="tags[type].size"
                :format="tags[type].type"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :on-progress="onProgress"
                :on-success="uploadSuccess"
                :on-error="uploadError">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </div>
    </template>
    <script>
    import {  getToken } from '@/utils/auth'
    import axios from 'axios'
    export default { 
        data(){ 
            return{ 
                action: process.env.VUE_APP_BASE_API + '/code/contract/upload', //地址
                showUploadList: true, //是否显示上传列表
                data: { }, //上传时附带的额外参数
                maxSize: null,
                formatList: null,
                file: { },
                tags:{ 
                    //图片（封面）
                    'picture':{ 
                        type:['jpg','jpeg','png','gif','bmp'],
                        size: 1024 * 1024 * 1024 // 1G
                    },
                    'document':{ 
                        type:['ppt','pptx','pdf','doc','docx','xls','xlsx'],
                        size: 1024 * 1024 * 1024 // 1G
                    }
                },
            }
        },
        props: { 
            type:{  // 支持的文件类型
                type: String,
                default: 'picture'
            },
            fileId:{ 
                type: Number
            },
            onSuccess:{ 
                type: Function,
                default () { 
                    return { };
                }
            }
        },
        mounted() { },
        methods: { 
            // 上传前操作
            handleUploadBefore(file){ 
                // 判断文件大小
                let fileSize = file.size,
                    tagSize = this.tags[this.type].size,
                    fileType = file.name.split('.'),
                    suffixName = fileType[fileType.length -1].toLowerCase(),
                    tagType = this.tags[this.type].type
    
                let formData = new FormData()
                formData.append("file", file)
                formData.append("id", this.fileId)
                axios({ 
                    method: 'post',
                    url: this.action,
                    headers: { 
                        'Content-Type': 'multipart/form-data',
                        'Authorization': 'Bearer ' + getToken()
                    },
                    data: formData
                }).then(res => { 
                }).catch(err => { })
            },
            //上传进度
            onProgress(event, file, fileList){ 
                this.progress = parseInt(event.percent)
                this.file = file
            },
            //上传成功
            uploadSuccess(res, file, fileList){ 
                this.$notify.success({ 
                    title: '提示',
                    message: file.name+'上传成功！'
                });
            },
            //文件格式错误
            handleFormatError(file){ 
            },
            handleMaxSize(file){ 
                let size = this.tags[this.type].size / 1024
                this.$notify.warning({ 
                    title: '文件太大了',
                    message: '文件"' + file.name + '"太大了, 请上传'+size+'M以内的文件！'
                })
            },
            uploadError(error, file, fileList){ 
                console.log('上传错误')
                this.$notify.error({ 
                    title: fileList.name+'上传错误',
                    message: error
                })
            },
            uploadCancel(){ 
                this.$refs['el-upload'].abort(this.file)
            }
        }
    }
    </script>