如何上传base64编码图片到七牛云
接口说明
POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Crc32>/x:user-var/<EncodedUserVarVal>
Host: upload.qiniu.com
Authorization: UpToken <UpToken>
Content-Type: application/octet-stream <Base64EncodedFileContent>
<Fsize>: 文件大小,必选。<EncodedKey>: 可选,如果没有指定则:如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key,否则用 hash 值作 key。<EncodedMimeType>: 文件的 MIME 类型。可选,默认是 application/octet-stream。<Crc32>: 文件内容的 crc32 校验值。可选,不指定则不进行校验。Host:上传域名up.qiniu.com 用于服务端上传,upload.qiniu.com 用于客户端的上传
返回包:
200 OK {
hash: <ETag>
}
通过javascript方式上传:
javascript代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function putb64(){ var pic = "填写你的base64后的字符串"; var url = "http://upload.qiniu.com/putb64/20264"; var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){ if (xhr.readyState==4){ document.getElementById("myDiv").innerHTML=xhr.responseText; } } xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token"); xhr.send(pic);} |
注意事项:
var url = "http://upload.qiniu.com/putb64/20264";这里的20264是你的图片的没经过base64处理的原图的字节大小。xhr.setRequestHeader("Authorization", "UpToken 填写你从服务端获取的上传token");这里的UpToken与后面的字符串保留一个空格。后面跟上你在服务端请求的token的字符串。具体你通过什么样子的请求方式获得是客户自己要关心的事情。获取文件大小的时候,切记要通过文件流的方式获取。而不是通过图片标签然后转换后获取。
var url = "http://upload.qiniu.com/putb64/20264";中可以扩展为以下方式:http://upload.qiniu.com/putb64/Fsize/key/EncodedKey/mimeType/EncodedMimeType/x:user-var/EncodedUserVarVal
Fsize: 文件大小,必选。支持传入 -1 表示文件大小以 http request body 为准。
EncodedKey: 可选,如果没有指定则:如果 uptoken.SaveKey 存在则基于 SaveKey 生产 key,否则用 hash 值作 key。 .
整个EncodedKey需要经过base64编码!!
- 如:
var key = uuid();
key = base64encode(key);
var url = 'http://upload.qiniu.com/putb64/-1/key/'+key具体可以参照: http://developer.qiniu.com/docs/v6/api/overview/appendix.html#urlsafe-base64
EncodedMimeType: 文件的 MIME 类型。可选,默认是 application/octet-stream。
举例:上传后并指定自定义的key:
http://upload.qiniu.com/putb64/12345/key/usxxeigng=
如何上传base64编码图片到七牛云的更多相关文章
- 前端上传 base64 编码图片到七牛云存储
参考文档 如何上传base64编码图片到七牛云 调试过程 文档中分别有 java 和 html 的 demo,可以根据文档示例调试. 下面是我调试的过程,可以作为参考,特别注意的是,如果需要给文件起名 ...
- 接口上传base64编码图片
package com.*.util; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io. ...
- php上传文件与图片到七牛的实例详解
上传文件到七牛最简单的方式就是使用七牛官方最新的SDK 用composer安装PHP SDK composer require qiniu/php-sdk 上传文件到七牛 use Qiniu\Auth ...
- 潭州课堂25班:Ph201805201 django 项目 第三十九课 后台 文章发布,图片上传到 FastDFS后端实现 七牛云讲解(课堂笔记)
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数 上传图片到七牛云 注册 https:// ...
- Ant Design Upload 组件上传文件到云服务器 - 七牛云、腾讯云和阿里云的分别实现
在前端项目中经常遇到上传文件的需求,ant design 作为 react 的前端框架,提供的 upload 组件为上传文件提供了很大的方便,官方提供的各种形式的上传基本上可以覆盖大多数的场景,但是对 ...
- 移动端图片上传base64编码
$base64 = "/9j/4AAQSkZJRgABAQEAkACQAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAA ...
- 小程序上传base64的图片,可上传多张
微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...
- 上传base64图片到七牛云前端遇到的坑
介意前端普通引入七牛云SDk上传图片到七牛云需要多个js,所以才有了base64的上传方式,简化操作,(懒.) 七牛云官方文档如下 https://developer.qiniu.com/kodo/k ...
- 上传base64格式的图片到服务器
上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...
随机推荐
- 分享一个自用的 Inno Setup 软件打包脚本
此脚本支持打包mysql.安装mysql服务.安装windows服务.操作ini文件.操作注册表.高效压缩文件等功能,基本能满足常用的软件打包需求. ;定义各种常量 #define MyAppName ...
- row_number() over (partition by....order by...)用法 分组排序
row_number() over (partition by....order by...)用法 分组排序 row_number() OVER (PARTITION BY COL1 ORDER BY ...
- Group Commit of Binary Log
160222 09:19:26 mysqld_safe Starting mysqld daemon with databases from /data01/mysql 2016-02-22 09:1 ...
- 柯南君:看大数据时代下的IT架构(3)消息队列之RabbitMQ-安装、配置与监控
柯南君:看大数据时代下的IT架构(3)消息队列之RabbitMQ-安装.配置与监控 一.安装 1.安装Erlang 1)系统编译环境(这里采用linux/unix 环境) ① 安装环境 虚拟机:VMw ...
- S3C6410嵌入式应用平台构建(五)——linux-3.14.4移植到OK6410-(Nand分区问题)
前一篇文章,我们的Linux能后启动了,只是在识别nand时候,没有获取到时钟源,导致后面的分区没哟进行. 我们从启动的log发现: [06/08-11:25:41:371]s3c24xx-nand ...
- Android 常用开发类库
android.app :提供高层的程序模型.提供基本的运行环境 android.content :包含各种的对设备上的数据进行访问和发布的类 android.database :通过内容 ...
- Myeclipse2014 SVN安装方法以及项目上传到svn服务器
1. 打开 Myeclipse 工具栏下的Help下的Install from Site 2.打开后弹出窗口, 并点击Add标签,如下图: 3.现在是最重要的一步,填写相关信息. 在对话框Name输入 ...
- web开发 - 从零开始 - 03 - 选择器
行间样式>id>class>类型选择>通配符 选择器的优先级一致的情况下,后边的样式会覆盖前边的
- getMetaData()
ResultSet resultset = null; ResultSetMetaData resultsetmetadata = null; resultsetmetadata = resultse ...
- ASP.NET MVC+Entity Framework 4.1访问数据库
Entity Framework 4.1支持代码优先(code first)编程模式:即可以先创建模型类,然后通过配置在EF4.1下动态生成数据库. 下面演示两种情形: 1.代码优先模式下,asp.n ...