[原创] 使用七牛云上传图片

七牛 图片上传

2017-07-07 3115

七牛云提供的空间还是很不错的。最近闲来无事,看了下七牛的相关东西,现把图片上传的部分记录一下

使用七牛云需要自己注册账号,这个就不再赘述,很简单的

申请好空间之后,上传需要一个上传凭证,七牛真的很体贴,已经把各种语言的上传凭证生成代码都写了demo,直接选择你喜欢的用就好


require 'qiniu'

# 生成七牛云的上传文件凭证(token)

# 配置信息AK SK
Qiniu.establish_connection! access_key:'你的AK',
                            secret_key:'你的SK'

# 上传的空间名字
bucket = '上传空间的名字'

put_police = Qiniu::Auth::PutPolicy.new(bucket) # 上传策略

upload_token = Qiniu::Auth::generate_uptoken(put_police) # 生成token
p upload_token


客户端上传js代码就简单了,页面随手做的,只看功能就好,样子忽略吧......


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="formImg">
        <input type="file" name="file">
    </form>
    <button onclick="uploadFile()">上传</button>
    <script>
        function uploadFile(){
            var xhr = new XMLHttpRequest()
            var formData = new FormData(document.getElementById('formImg'))
            formData.append('token','生成的上传token')
            xhr.open('post','http://upload.qiniu.com/')
            xhr.send(formData)
            xhr.onreadystatechange = function(e){
                if(xhr.readyState == 4){
                    console.log(xhr)
                    var res = JSON.parse(xhr.response)
                }
            }
        }
    </script>
</body>
</html>