如何上传base64编码图片到七牛云
2017-06-13 本文已影响0人
还有谁叫李狗蛋
首先说明...如果说的不对请留言纠正我，谢谢
最近要搞一个上传图片的
介种界面
之前我搞过七牛云JS SDK ，觉得很可怕，很复杂，但是最后我通过参考别人的demo做出来，我一直搞不懂SDK跟我现在做的 上传base64编码图片 到七牛云 有什么区别...回来回来正题...
html结构参考dropify
需求是点击正方形，就弹出选择文件对话框，选择图片之后就会显示在正方形里。
html
<div class="book-pic-wrapper">
<div class="book-pic-message">
<span class="file-icon"></span>
<p>格式:JPG、PNG</p>
<p>大小:小于1m</p>
</div>
<input class="input-file" type="file" onclick="upload(this)">
<button class="book-pic-clear" type="button" onclick="del(this)">删除</button>
<div class="book-pic-preview"></div>
</div>
css
.book-pic-wrapper { display: block; position: relative; cursor: pointer; overflow: hidden; width: 210px; height: 210px; font-size: 14px; line-height: 22px; color: #777; background-color: #f2f2f2; text-align: center;float: left; margin-right: 40px;}
.book-pic-wrapper .book-pic-message { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.book-pic-wrapper .book-pic-message span.file-icon { position: relative; display: inline-block; width: 50px; height: 50px; background: url(../../images/bg.png) no-repeat -122px -353px; }
.book-pic-wrapper input { position: absolute; top: 0; right: 0; opacity: 0; cursor: pointer; z-index: 5; font-size: 154px;}
.book-pic-wrapper .book-pic-clear { width: 100%; height: 60px; display: none; border: none; position: absolute; opacity: 0; z-index: 7; top: 154px; right: 0; background: none; text-transform: uppercase; font-size: 16px; color: #FFF; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
.book-pic-wrapper:hover .book-pic-clear { opacity: 1; }
.book-pic-wrapper .book-pic-preview { display: none; position: absolute; z-index: 1; background-color: #FFF; padding: 5px; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; text-align: center; }
.book-pic-wrapper .book-pic-preview img { top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: relative; max-width: 100%; max-height: 100%; background-color: #FFF; }
重点来了，作为一个渣渣的我，不够细心，遇到坑点也是多的
-
var pic要的是data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......里逗号之后的字符串 -
http://upload.qiniu.com这是华东的，如果不确定自己是什么地区，登录一下七牛看储存空间列表
储存空间列表
-
url中http://upload.qiniu.com/putb64/size/key/000这里的000是写自定义文件名 -
xhr.responseText是字符串！字符串！字符串！要取到属性key先转换json格式 -
xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token")记得别删除UpToken单词后面有一个空格的
js
function upload(input) {
$(input).change(function(){
var file = this.files[0];
// if(file.type.indexOf('image') != 0) { // 只上传图片}
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
var size = e.total;
if(size>1048576){
alert('图片大小不能超过1M');
return;
}
var data64 = e.target.result; // data64
data64 = data64.slice(data64.indexOf(',')+1); // 截取前缀的base64 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
putb64(size,data64); // 执行上传
};
}
});
function putb64(size,data64){
var pic = data64; // 填写你的base64后的字符串
var url = "http://upload.qiniu.com/putb64/"+size+'/key/'+window.btoa("0612_"+ new Date().getTime()+"_"+parseInt(Math.random()*10));
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4){ // xhr.responseText => "{"hash":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ","key":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ"}"
$('.book-pic-message').hide();
var back_json = JSON.parse(xhr.responseText);
$('.book-pic-preview').append('').show();
$('.book-pic-clear').css('background','#4c4c4c').show();
}
};
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token");
xhr.send(pic);
}
}
function del(button) {
//清除input file已选中的文件
$(button).siblings('.input-file').wrap('<form></form>');
$(button).siblings('form')[0].reset();
$(button).siblings('form').find('.input-file').unwrap();
$(button).siblings('.book-pic-preview').find('img').remove();
$(button).hide();
$('.book-pic-preview').hide();
$('.book-pic-message').show();
}
会的我都说了，其实我还想做一个判断该图片是否能读取的，因为任意一个文件后缀名改成图片格式的都可以上传，但是图片是显示不出来的，这时我想提示上传的文件格式有误。一开始我是判断xhr.getResponseHeader('content-type')，后来发现返回的都是json格式，哈哈哈哈，然后就不知道怎么判断...
