excel oss 上传_使用form表单跨域cors进行OSS文件上传-问答-阿里云开发者社区-阿里云...

最新推荐文章于 2023-08-04 17:57:47 发布

weixin_39928017

最新推荐文章于 2023-08-04 17:57:47 发布

阅读量175

点赞数

文章标签： excel oss 上传

本文链接：https://blog.csdn.net/weixin_39928017/article/details/111859779

版权

这些天在做一个数据分析网站的优化工作，接触了一些阿里云的服务，包括CDN，OSS，遇到了不少困难，当然也是学习了不少东西，其中OSS跨域上传自己在老大的带领下，琢磨出来一点，应该说是小技巧了吧，拿出来与大家分享一下；

首先，感谢下这两篇帖子：

http://(去掉括号里的字)bbs.aliyun.com/read/179074.html?spm=5176.7189909.0.0.2H8Eyl

http://

(去掉括号里的字)

bbs.aliyun.com/read/230310.html?spm=0.0.0.0.yqRa3C

(发帖数未到5，不能带链接地址)

第一个帖子，让我知道了cors这个东西是个啥，第二个，当然是教会了我怎么去用(确实有很多帮助，建议看过这两篇再往下看)

下面就在上面两个帖子分享的基础上，分享一点自己所遇到的问题以及解决方法，希望对用需要的人有所帮助。

相信对于如何在后台使用代码进行OSS上传与下载，大家应该都清楚，因为官方给的API已经很清楚的写了详细的demo，亲测可行。现在我主要说下在前端，利用http请求，将选择的文件，不通过服务器，直接上传到OSS(开放存储服务)。

首先，我是使用了上述第二个帖子的相关代码，整理了一下，没有问题，可以跑的通； however，看下面的代码：

var file = document.getElementById('file').files[0];写法上应该没有什么问题吧，对于我们这些chromer来说，可是在IE10以下的浏览器，DOM元素没有"files"这个属性，god damn! welcome to the painful develop world of IE,这是我在stackoverflow上找解决办法的时候印象较深的一句回答。

如果一定要兼容IE10以下，老大给出了一个建议，使用最原始的form表单提交file，但是：

var fd = new FormData();

fd.append('key', key);

fd.append('Content-Type', file.type);

fd.append('OSSAccessKeyId', oss_key);

fd.append('policy', policyBase64);

fd.append('signature', signature);

fd.append("file", file);

var xhr = self.createXmlHttpRequest();

xhr.upload.addEventListener("progress", self.uploadProgress, false);

xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("error", uploadFailed, false);

xhr.addEventListener("abort", uploadCanceled, false);

xhr.send(fd);这些Formdata里面的值是怎么通过form表单提交呢？如果是ajax倒是可以直接作为data参数提交请求，直接用form表单呢？

从apeend这个方法可以联想到，应该是把这些key作为id、 name，value作为value，放到了几个input标签里，可能说的不是很清楚吧，直接看代码吧~

$("").attr({'id': 'Content-type', 'name': 'Content-type', 'value': 'application/vnd.ms-excel'}).appendTo($import_button_form);

$("").attr({'id': 'OSSAccessKeyId', 'name': 'OSSAccessKeyId', 'value': oss_key}).appendTo($import_button_form);

$("").attr({'id': 'policy', 'name': 'policy', 'value': policyBase64}).appendTo($import_button_form);

$("").attr({'id': 'signature', 'name': 'signature', 'value': signature}).appendTo($import_button_form);其实这个在我看起来不可思议的写法，是大哥给想出来的，因为前一天晚上，没想出什么办法兼容IE，他看了下form表单提交表单内容的实现，想出来这种写法试试，就试试了，虽然第一次这么写能够提交，但是返回的结果还是错误的，就对比了一下之前ajax正确提交后的http请求header，发现也貌似没有什么不同，返回的报错结果却是说什么key not special(没记太清楚)类似的，应该说key这个表单元素不是特殊的，或者根本没找到。但是在header里面确实看到有呀，这时大哥机智的来了一句，你要不把key这个input标签放到file前面……

$("").attr({'id': 'key', 'name': 'key'}).appendTo($import_button_form);

this.import_button = $("").attr({'type': 'file','id': 'file', 'name': 'file' }).addClass("import-button-input-file").appendTo( $import_button_form );说时迟，那时快，刚换上，重新跑了一遍就成功了。

所以这里就简单分享下这个用表单提交文件到OSS兼容IE10以下版本的方法

第一次发帖，有什么问题，可以回帖多交流，谢谢