文件上传

介绍

UploadFile是一个文件上传组件

引入

import Vue from 'vue';
import UploadFile from '@lambo-design-mobile/upload-file';

Vue.use(UploadFile);

代码演示

基础用法

<upload-file :multiple="true" @upload-result="uploadResult"></upload-file>

文件变更

<upload-file :multiple="true" :fileList="fileList" @upload-result="uploadResult"></upload-file>

export default {
    data() {
        return {
            fileList: [{
                fileId: 'eeceb913ea0449c5bc37fb17e5128c2f',
                fileUrl: '/ibp-upms-server/oss/file/get/eeceb913ea0449c5bc37fb17e5128c2f',
                fileName: '测试PDF.pdf',
                showSize: '47KB',
            },{
                fileId: '762c9fae9b684e76834bd03ddddac9a7',
                fileUrl: '/ibp-upms-server/oss/file/get/762c9fae9b684e76834bd03ddddac9a7',
                fileName: '测试文档.docx',
                showSize: '11KB',
            },{
                fileId: '05faece00f454d5b8b4c7bb681d69278',
                fileUrl: '/ibp-upms-server/oss/file/get/05faece00f454d5b8b4c7bb681d69278',
                fileName: 'appIcon.jpg',
                showSize: '8KB',
            },]
        }
    },
    methods: {
        uploadResult(result) {
            console.log('uploadResult', result)
        }
    }
}

文件明细

<upload-file :multiple="true" :fileList="fileList" :uploadBtn="false"></upload-file>

export default {
    data() {
        return {
            fileList: [{
                fileId: 'eeceb913ea0449c5bc37fb17e5128c2f',
                fileUrl: '/ibp-upms-server/oss/file/get/eeceb913ea0449c5bc37fb17e5128c2f',
                fileName: '测试PDF.pdf',
                showSize: '47KB',
            },{
                fileId: '762c9fae9b684e76834bd03ddddac9a7',
                fileUrl: '/ibp-upms-server/oss/file/get/762c9fae9b684e76834bd03ddddac9a7',
                fileName: '测试文档.docx',
                showSize: '11KB',
            },{
                fileId: '05faece00f454d5b8b4c7bb681d69278',
                fileUrl: '/ibp-upms-server/oss/file/get/05faece00f454d5b8b4c7bb681d69278',
                fileName: 'appIcon.jpg',
                showSize: '8KB',
            },]
        }
    },
}

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------------------|-------------|---------|-------------------------------------------------------------------------------------------------------|-------------------------------------------| | ossServerContext | 文件上传后端应用上下文 | string | /ibp-upms-server | ---- | | ossFilePutUrl | 文件上传后端接口路径 | string | /oss/file/put | ---- | | ossFileGetUrl | 文件下载后端接口路径 | string | /oss/file/get/ | ---- | | showFileList | 是否显示图片列表 | boolean | true | ---- | | accept | 支持上传文件类型 | string | image/*,application/pdf,application/zip,text/csv,text/plain,application/msword,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | ---- | | fileSuffix | 支持的文件名后缀 | string | pdf| doc|docx|txt |xls |xlsx |jpg |jpeg |png |gif |zip |csv |----| | multiple | 是否支持上传多个文件 | boolean | false | ---- | | uploadBtn | 是否显示上传、删除按钮 | boolean | true | ---- | | fileList | 回显图片列表 | array | - | ---- | | otherParam | 其他参数 | string | - | ---- |

Events

| 事件名 | 说明 | 回调参数 | |------|-----------|-------| |upload-result| 上传成功的文件列表 | array |