彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 彩世界平台 > 如何上传base64编码图片到七牛云

如何上传base64编码图片到七牛云

发布时间:2019-09-06 13:55编辑:彩世界平台浏览(63)

    在开发过程中,我们常会遇到图片视频上传的场景

    首先说明...如果说的不对请留言纠正我,谢谢
    最近要搞一个上传图片的

    大多数情况下我们都选择七牛来减轻我们服务器压力至于为什么

    图片 1

    我是这样理解的

    介种界面

    “你把视频放在自己服务器上,那么别人访问h5和视频用的是一个带宽,

    之前我搞过七牛云JS SDK ,觉得很可怕,很复杂,但是最后我通过参考别人的demo做出来,我一直搞不懂SDK跟我现在做的 上传base64编码图片 到七牛云 有什么区别...回来回来正题...
    html结构参考dropify
    需求是点击正方形,就弹出选择文件对话框,选择图片之后就会显示在正方形里。

    数量多了以后会造成页面打不开的情况”

    html
    <div class="book-pic-wrapper">
        <div class="book-pic-message">
    
            <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(../..g.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这是华东的,如果不确定自己是什么地区,登录一下七牛看储存空间列表

      图片 2

      储存空间列表

    • urlhttp://upload.qiniu.com/putb64/size/key/000 这里的000是写自定义文件名

    • xhr.responseText字符串!字符串!字符串!要取到属性key先转换json格式
    • xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token") 记得别删除UpToken单词后面有一个空格的

    首先你要下载七牛的SDK

    本文由彩世界平台发布于彩世界平台,转载请注明出处:如何上传base64编码图片到七牛云

    关键词:

上一篇:TensorFlow 深度学习笔记 卷积神经网络

下一篇:没有了