bootstrap-fileinput 配合oss使用教程

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: 本教程使用的是bootstrap-fileinput v4.5.0和jquery-2.1.4,后台代码使用的是asp.net,实现bootstrap-fileinput提交文件到oss上

本教程使用的是bootstrap-fileinput v4.5.0和jquery-2.1.4,后台代码使用的是asp.net
代码:

  1. 直接使用以上代码会oss提交会出现以下错误:

    IncorrectNumberOfFilesInPOSTRequest
    POST requires exactly one file upload per request.
    5B6270FA17B51A8D536CDB3C
    ***.oss-cn-qingdao.aliyuncs.com
    
  2. 对比提交数据发现,该位置不对,应该改成“file”
    image001
  3. 查找fileinput.js文件中file_date,找到该位置,可以看到,把”file_date”改成”file”就可以了
    image003
  4. 修改完毕后,再次提交会出现一下错误,查找了下资料,发现,因为除了文件外oss上传还需要提交一些额外的参数,参数的位置在文件的后面就会出现一下情况,所以需要改下fileinput.js文件,使得uploadExtraData方法携带的参数出现在文件的前面
    InvalidArgument

The bucket POST must contain the specified 'key'. If it is specified, please check the order of the fields
5B62723D91D82BC5B78251E5
*.oss-cn-qingdao.aliyuncs.com
key

  1. 因此我们需要更改下_uploadSingle函数的末尾
    image005
  2. 并且需要更改一下_ajaxSubmit函数:
    image007
  3. 大功告成
    image009

源码地址为 https://gitee.com/lwq202/bootstrap-fileinput_oss
本文参考了https://www.cnblogs.com/newton/p/6066020.html

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
6月前
|
存储 监控 API
oss教程
oss教程
260 1
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
1月前
|
存储 Java 开发工具
【三方服务集成】最新版 | 阿里云OSS对象存储服务使用教程(包含OSS工具类优化、自定义阿里云OSS服务starter)
阿里云OSS(Object Storage Service)是一种安全、可靠且成本低廉的云存储服务,支持海量数据存储。用户可通过网络轻松存储和访问各类文件,如文本、图片、音频和视频等。使用OSS后,项目中的文件上传业务无需在服务器本地磁盘存储文件,而是直接上传至OSS,由其管理和保障数据安全。此外,介绍了OSS服务的开通流程、Bucket创建、AccessKey配置及环境变量设置,并提供了Java SDK示例代码,帮助用户快速上手。最后,展示了如何通过自定义starter简化工具类集成,实现便捷的文件上传功能。
【三方服务集成】最新版 | 阿里云OSS对象存储服务使用教程(包含OSS工具类优化、自定义阿里云OSS服务starter)
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程,包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
BootStrap在Vue中的安装使用详细教程
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
Bootstrap 5 保姆级教程(十二):弹出框 & 消息弹窗
|
6月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
Bootstrap 5 保姆级教程(十一):模态框 & 提示框
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(七):分页 & 列表组
Bootstrap 5 保姆级教程(七):分页 & 列表组
|
6月前
|
前端开发
Bootstrap 5 保姆级教程(六):进度条 & 加载效果
Bootstrap 5 保姆级教程(六):进度条 & 加载效果
|
6月前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片

热门文章

最新文章