当前位置: 首页 > ops >正文

amis上传组件导入文件接口参数为base64格式的使用示例

amis上传组件地址:

amis - 低代码前端框架-上传组件https://aisuda.bce.baidu.com/amis/zh-CN/components/form/input-file

ajax事件:

amis - 低代码前端框架-ajax事件https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/event-action#%E5%8F%91%E9%80%81-http-%E8%AF%B7%E6%B1%82

找不到,可以搜索“ajax”,再继续搜索expression:

属性名类型默认值说明
expressionboolean|表达式-执行条件,不设置表示默认执行

    实现思路:

    普通上传参照官方示例就行了,下方是base64格式文件自动上传的步骤:

    • 上传组件,文件内容为base64格式,利用change事件实现自动上传
    • silent为true静默调用接口,outputVar接收抛出接口返回的数据,存入变量res
    • toast显示接口返回的提示信息res.responseMsg,使用expression控制显示条件,成功时不要显示成功信息,只在接口报错时显示
    • 不过上传文件成功后再删除该文件,删除会被识别为change事件,使用expression让文件为空时不调用上传接口,避免出错

    代码示例:

    {"type": "input-file","id": "file-upload-btn","drag": false,"name": "xxx","label": "上传","proxy": true,"accept": ".xls,.xlsx","maxSize": 5000000,"onEvent": {"change": {"actions": [{"api": {"url": "/xxx/import","data": {"fileName": "${file.name}","base64Value": "${file.value}"},"method": "post","silent": true,"requestAdaptor": "return { ...api,  data: { ...api.data,base64Value:api.data.base64Value.split(',')[1]}}"},"outputVar": "res","actionType": "ajax","expression": "${!!file.name}"},{"args": {"msg": "${res.responseMsg}","msgType": "error"},"actionType": "toast","expression": "${res.responseStatus!=0}"}]}},"asBase64": true,"btnLabel": "上传文件","multiple": false,"required": true,"useChunk": false,"autoUpload": true,"uploadType": "fileReceptor","hideUploadButton": true
    }

    http://www.xdnf.cn/news/18923.html

    相关文章:

  • 计算机三级嵌入式填空题——真题库(22)原题附答案速记
  • 强化学习与注意力机制的AlignSAM框架解析
  • 微算法科技(NASDAQ:MLGO)推出创新型混合区块链共识算法,助力物联网多接入边缘计算
  • [n8n] 工作流数据库管理SQLite | 数据访问层-REST API服务
  • Paimon——官网阅读:Flink 引擎
  • 前端javascript在线生成excel,word模板-通用场景(免费)
  • AbMole小课堂丨详解野百合碱在动物肺动脉高压、急性肺损伤、静脉闭塞肝病造模中的原理及应用
  • Go 语言常用命令使用与总结
  • 微信小程序对接EdgeX Foundry详细指南
  • 云计算学习100天-第31天
  • 从零开始的云计算生活——第五十三天,发愤图强,kubernetes模块之Prometheus和发布
  • 【SpringAI】快速上手,详解项目快速集成主流大模型DeepSeek,ChatGPT
  • 【TEC045-KIT】基于复旦微 FMQL45T900 的全国产化 ARM 开发套件
  • Uniapp中自定义导航栏
  • 如何将iPhone上的隐藏照片传输到电脑
  • Flask测试平台开发实战-第二篇
  • 服务器核心组件:CPU 与 GPU 的核心区别、应用场景、协同工作
  • 麒麟操作系统挂载NAS服务器
  • React中优雅管理CSS变量的最佳实践
  • 【动态规划】子数组、子串问题
  • 保姆级教程 | 在Ubuntu上部署Claude Code Plan Mode全过程
  • 设计模式相关面试题
  • 2025年KBS SCI1区TOP,矩阵差分进化算法+移动网络视觉覆盖无人机轨迹优化,深度解析+性能实测
  • 前端异常监控,性能监控,埋点,怎么做的
  • Android 开发 - 数据共享(数据共享、内容提供者实现、动态权限申请)
  • 深度学习篇---模型参数保存
  • [肥用云计算] Serverless 多环境配置
  • PCM转音频
  • 面试之HashMap
  • LightRAG