前端js使用又拍云绕过服务器直接上传图片到云端

一般我们平时做图片视频上传的时候一直是上传到本地服务端下，如果我们想把文件传到云端类似又拍云或者七牛云这样的云端存储下，虽然可以先将文件传给服务器，再由服务器传给云端，但是如果需要上传的文件比较多的话，就不必占用服务器带宽，可以直接在前端绕过服务器上传到云端。七牛云官方api比较完善一点，但是又拍云官方没有提供js上传到云端的api，而且文档写的不够清楚。话不多说，上代码。

<input id='fileA' type='file' accept='image/gif, image/jpeg,image/png' multiple='multiple'  onchange='upLoadG()'><script>
<script src="lib/md5.js"></script>
<!--这个前端js的MD5加密工具又拍云官方提供了，可以去又拍云官方下载-->
var options = {'bucket': '需要上传的空间名','save-key': '/{year}/{mon}/{day}/{filemd5}{.suffix}','expiration': Math.floor(new Date().getTime() / 1000) + 86400
};
// 查看更多参数：http://docs.upyun.com/api/form_api/#表单API接口简介
var policy = window.btoa(JSON.stringify(options));
// 从 UPYUN 用户管理后台获取表单 API
var form_api_secret = '去自己的又拍云控制台找表单api密钥';
// 计算签名
var signature = md5(policy + '&' + form_api_secret);
function upLoadG(e){    var fileInput = document.getElementById(fileA); var file = fileInput.files[0]; formData.append("policy", policy);  formData.append("signature", signature);  formData.append("file",file);                  var url = 'http://v0.api.upyun.com/' + options.bucket;$.ajax({  url : url,  type : 'POST',  data : formData,  processData : false,  contentType : false,  success : function(responseStr) {  //     alert("成功：" + JSON.stringify(responseStr)); // console.log(responseStr);var jsonObj = $.parseJSON(responseStr);//eval("("+responseStr+")"); },  error : function(responseStr) {  // alert("失败:" + JSON.stringify(responseStr));//将    json对象    转成    json字符串。  }  });</script>

安全着想，js上传所必要的policy和signature参数需要放到后端生成出来返给前端，不然随便一个人看到你的前端代码就能把参数拿来上传文件到你的又拍云。另外我自己测试的时候发现这样上传又拍云只接收name为file的文件，其他名字的不接收，暂时不清楚怎么回事。

http://jerryzou.com/posts/bulkUploadToUPYUN/推荐这个博客，可能需要google才能访问到他的GitHub，使用的一个plupload组件批量上传到又拍云。

前端js使用又拍云绕过服务器直接上传图片到云端相关推荐

JAVA接入又拍云（upYun）上传图片和处理参数
新搭项目已经使用里fastDFS,昨天老大突然要求使用upYun做图片服务器.看了一下相关文档,发现又拍云自带CDN属性,索性直接把fastDFS作为备份使用.使用过程中发现又拍云文档并不是很友好,网 ...
从零开始部署Node.js服务至阿里云ECS服务器并通过express框架实现外网IP访问html项目
大致步骤(2017.07.25): 1.购买阿里云服务器 2.在云服务器上搭建node环境 3.上传Node.js代码,并测试通过一.购买阿里云服务器 1.登陆阿里云 2.选择控制台 3.选择云服务 ...
锋云数据服务器管理文件说明书,云端数据库使用说明
NoteExpress提供云端文献库功能了!云端文献库会自动将题录.笔记及附件同步到云服务器,便于在不同电脑之间同步您的工作. 登录使用云端文献库,需要在NoteExpress中登录,建议勾选自动登 ...
【文件上传漏洞-03】前端JS检测与绕过实例—以upload-labs-1为例
目录 1 前端JS检测与绕过 2 前端JS检测与绕过实例 2.1 实验目的 2.2 操作环境 2.3 前期准备 2.4 具体过程 2.4.1 文件上传前期盲测 2.4.2 方法一:删除JS直接上传 2 ...
华为云内容审核API调用前端 js uni-app
文章目录前言一.华为云的内容审核api的调用需要哪些东西? 二.使用步骤 1.先注册一个华为云的账号 2.申请内容审核服务 3.[华为云内容审核API的官方文档](https://support. ...
又拍云使用ajax 上传
在又拍云官网,没有提供js的demo,只有node.js,和其他的,而现在又有通过 js来上传文件到又拍云的服务器,不能通过自己的服务器进行中转操作,这样会耗费自己的服务器的带宽. 上代码吧,这个代码 ...
轻量必应每日一图接口-前端网站源码支持上传到又拍云调用
简介: 众所周知,必应搜索官网每天会更新一张高质量的背景图. 许多同学想在接口中调用它们, 但必应的服务器在国内不算特别稳定(gt;500ms). Bing-upyun 可以把每天的必应图片上传至又拍 ...
vue/react/web前端项目部署到阿里云服务器_nginx_pm2流程及部署前的准备
前端开发完成的项目,不管是使用vue.react.或者是别的web项目,最终都是要部署到外网上,让用户可以通过域名来访问.这篇文章以一个 react 移动端的项目为例,讲怎样将自己本地的项目部署到阿里 ...
阿里云OSS服务端签名前端JS直传（php）示例
阿里云OSS服务端签名后前端JS直传(php)示例需求:服务端上传图片太慢,需要使用前端直传的方式.但前端把阿里云的 AccessKey ID 和 AccessKey Secret 放在前端文件中会 ...

前端js使用又拍云绕过服务器直接上传图片到云端

前端js使用又拍云绕过服务器直接上传图片到云端相关推荐

最新文章

热门文章