mediate-manage-web/src/components/uploadSingleFile.vue

<template>
    <div class="upload-single-file-wrap">
        <el-upload
                class="el-upload-box"
                ref="upload"
                action=""
                :accept="accept"
                :show-file-list="false"
                :http-request="httpRequest">
            <div class="upload-file">
                <i class="el-icon-plus uploader-file-icon"></i>上传模板
            </div>
        </el-upload>
        <!-- <div class="f12 text-center color-text-regular line-height-20">{{uploadName}}</div> -->
        
    </div>
</template>

<script>
import caseManagement from "@/services/caseManagement";
    export default {
        name: "uploadFile",
        components: {

        },
        props: {
            caseId: {
                // 案件ID
                type: String,
                default: ''
            },
            documentType: {
                // 文件类型
                type: String,
                default: ''
            },
            span: {
                // layout组件参数，每排排列几个
                type: Number,
                default: 5
            },
            accept: {
                type: String,
                default: '*',
            },
            imageHeight: {
                // 图片、上传框的高度
                type: String,
                default: ''
            },
            imageMode: {
                // 图片裁剪、缩放的模式,具体参考uni image
                type: String,
                default: 'aspectFit'
            },
            readOnly: {
                // 只读，true-是，false-否
                type: Boolean,
                default: false
            },
            
            fileList: {
                // 已上传的文件列表
                type: [Array, Object],
                default: () => {
                    return [
                        //{ url:文件地址, fileName: 文件名}
                    ]
                }
            },
            uploadName: {
                // 要上传的文件昵称
                type: String,
                default: '上传'
            },
            maxCount: {
                // 允许上传文件的最大总数
                type: Number,
                default: 1
            },
            selectCount: {
                // 每次上传时，允许用户选择的文件数量
                type: Number,
                default: 1
            },
            customUpload: {
                // 自定义上传按钮的样式
                type: Boolean,
                default: false
            },
            autoUpload: {
                // 是否自动上传
                type: Boolean,
                default: true
            },
            showFileName: {
                // 是否显示文件名
                type: Boolean,
                default: false
            },
            splitFileTitle: {
                // 是否在显示效果上分割文件、文件名
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                lists: [
                    //{url: 文件地址, fileName: 文件名, deletable: 是否可删除, readStatus: 是否显示阅读状态, iconFrontSrc: 图标样式}
                ],
                srcList: [],
                dialogVisible: false,
                isSvg: true,
                editPdfFlag:false,
                editMp4Flag:false,
                editImgFlag: false,
                previewPath:'',
            }
        },
        methods: {
            async httpRequest(param) {
                // console.log('httpRequest上传文件：',param)
                let fileType = this.$util.getFileExtension(param.file.name)
                if(this.accept !== '*' && this.accept.indexOf(fileType) === -1) {
                    this.$message.warning(`不能上传${fileType}格式的文件`)
                    return
                }

                try{
                    let formData = new FormData()
                    formData.append('file', param.file)
                    formData.append('caseId', this.caseId)
                    formData.append('documentType', this.documentType)

                    // caseManagement.customFileUpload({caseId:this.caseId,documentType:Filedata.documentType,file:Filedata.fileObj.url}).then((res) => {
                    //     this.$message.success("上传模板成功");
                    //     this.getWritCaseList()
                    // });

                    // let uploadFileRes = await fetchApi.uploadFile(formData);
                     let uploadFileRes = await caseManagement.customFileUpload(formData);
                    // console.log(uploadFileRes)
                    // let fileInfo = {
                    //     url: uploadFileRes.url,
                    //     fileSize: uploadFileRes.size
                    // }
                    this.$emit('handleUploadFile')

                }catch (e) {
                    this.$message.error(e.msg)
                }
            },
        },
    }
</script>

<style lang="scss">
.upload-single-file-wrap{
    float: left;
    .el-col-ctn-box{
        width: 100%;
        height: 160px;
    }
    .el-col-upload-box{
        width: 120px;
        height: 160px;
        border-radius: 4px;
        overflow: hidden;
    }
    .el-upload-box{
        width: 80px;
        height: auto;
        background: #fff;
        border: 0px dashed #fff;
        border-radius: 0;
    }
    .el-col-ctn-box .el-upload,
    .el-col-ctn-box .upload-file{
        width: 100% !important;
    }
    .el-col-ctn-box .upload-preview-box{
        position: relative;
        height: 120px;
        border: 1px dashed #EBEEF5;
    }
    .el-col-ctn-box .upload-delete-icon{
        width: 30px;
        height: auto;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 11111;
    }
    .el-col-ctn-box .upload-file{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 120px;
    }
    .el-col-ctn-box .uploader-file-icon{
        font-size: 32px;
        color: $color-text-secondary;
    }
    .el-col-ctn-box .el-image-upload{
        border-radius: 4px;
        padding: 5px;
        box-sizing: border-box;
    }
    .el-col-ctn-box .txt-center{
        height: 40px;
        line-height: 20px;
    }
    .line-height-30{
        line-height: 30px;
    }
}

</style>