凯乐士开发平台

深浅模式

文件上传 filefield 组件 ​

filefield组件是一种用户界面控件，允许用户通过通过点击或者拖拽上传文件。多应用于表单场景，为用户提供便捷的文件上传功能。

组件示例 ​

javascript
{
    xtype: 'filefield',
    fieldLabel: '文件',
    bind: {
        value: '{form.file}',
    },
    hidden: false,
    disabled: false,
    loading: false,
    cls: '',
    placeholder: '请输入',
    size: 'default',
    readonly: false,
    weight: 1,
    required: true,
    showFileList: true,
    listeners: {
        success: '{filefield1_success}',
    },
    action: '/wms_api/api/pages/sys/pdaVersion/PdaPackUpload@uploadFile',
    autoUpload: true,
    method: 'post',
}

编写后端方法 ​

groovy
/**
 * 文件上传
 * @param request
 * @return
 */
static def uploadFile(HttpServletRequest request) {
    String deploy = request.getHeader("deploy")
    SecurityContext context = SecurityContextHolder.getContext()
    if (context == null) {
        throw new BusinessException("当前用户未登录")
    }
    MultipartFile file = ((StandardMultipartHttpServletRequest) ((HttpRequestCachingWrapper) request).getRequest()).getFile("file");
    FileUploadRequest uploadRequest = new FileUploadRequest(DEFAULT_BUCKET_NAME, file.getInputStream())
    uploadRequest.setFileName(file.getOriginalFilename())
    uploadRequest.setFileSize(file.getSize())
    uploadRequest.setContentType(file.getContentType())
    FileSystemClient fileClient = SpringContextHolder.getBean(FileSystemClient.class)
    FileUploadResponse response = fileClient.upload(uploadRequest)
    return Model.newSuccess(response)
}

事件 ​

事件名称说明参数和示例
preview点击文件列表中已上传的文件时触发file1_preview() {}
remove文件列表移除文件时触发file1_remove() {}
success文件上传成功时触发file1_success() {}
error文件上传失败时触发file1_error() {}
progress文件上传时触发file1_progress() {}
change文件状态改变时触发file1_change() {}
exceed当超出限制时触发file1_exceed() {}
before_upload上传文件之前时触发file1_before_upload() {}
before_remove删除文件之前时触发file1_before_remove() {}

方法 ​

方法名称说明参数和示例
submit提交上传this.refs.file1.submit()
clearFiles清空已上传文件列表this.refs.file1.clearFiles()

属性 ​

属性名称说明示例
reference设置组件的refsrefs:file1
modal设置组件的modal值名（必填项，否则运行时组件切换没反应）bind:{value:'{iconUrl}'}
hidden隐藏或显示组件，默认为falsehidden:false
required组件是否必填，默认为falserequired:false
weight权重的宽度，6中选择，1、2、3、4、5、6，默认为1weight：1
labelWidth标签宽度，默认为autolabelWidth:80
size设置组件的尺寸大小，三种选项large（大）、default（中）、small（小），默认为falsesize:default
disabled是否禁用组件，默认为falsedisabled:false
readonly是否允许只读，默认为falsereadonly:false
marginTop距上的内边距，默认为0paddingTop:5
marginRight距右的内边距，默认为0paddingRight:5
marginBottom距下的内边距，默认为0paddingBottom:5
marginLeft距左的内边距，默认为0paddingLeft:5