python 3.6 将图片上传到七牛云

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/baidu_39416074/article/details/80923418

将图片上传到云上

申请七牛云账户，创建存储空间。

# -*- coding: utf-8 -*-

from qiniu import Auth, put_data, etag, urlsafe_base64_encode
import qiniu.config
from django.http import JsonResponse

# 需要填写你的 Access Key 和 Secret Key
access_key = ''
secret_key = ''

# 七牛云域名
QINIU_URL_DOMAIN = ""


def storage(file_data):
    """
    上传文件到七牛
    :param file_data: 要上传的文件数据
    :return:
    """
    # 构建鉴权对象
    q = Auth(access_key, secret_key)

    # 要上传的空间
    bucket_name = 'images'

    # 生成上传 Token，可以指定过期时间等
    token = q.upload_token(bucket_name, None, 3600)

    ret, info = put_data(token, None, file_data)

    if info.status_code == 200:
        # 表示上传成功, 返回文件名
        return ret.get("key")
    else:
        # 上传失败
        raise Exception("上传七牛失败")
if __name__ == '__main__':
    storage()

# 采用put_data 方法  以流的形式  详见 七牛云 Python SDK

后端代码：

def resume_albums(request):
    if request.method == "POST":
        dict = request.POST
        uid = dict.get('uid')
        image_file = request.FILES.get('album_url')
        albums = Zlh_resume_album.objects.filter(uid=uid)
        album = albums.first()
        image_data = image_file.read()
        file_name = storage(image_data)
        album.album_url = file_name  # 将图片地址存入数据库
        album.save()
        img_url = QINIU_URL_DOMAIN + file_name

        return JsonResponse(
            {
                "status": "success",
                "code": 200,
                "msg": "上传成功",
                "img_url": img_url,
            }, content_type="application/vnd.zlh+json"  # 这种方式更安全  后面写文章 解释下
        )

HTML方式

通过form表单提交文件，设置enctype="multipart/form-data"

<form action="UploadFile.ashx" method="post" enctype="multipart/form-data">
    <input type="file" name="fileUpload" />
    <input type="submit" value="上传文件" />
</form>

ajax方式

通过构建FormData，append添加参数，以键值对形式
html文件

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

js文件

var formData = new FormData();
$(document).ready(function(){
    $("#upload").click(function(){
    formData.append('file', $('#file')[0].files[0]);
        $.ajax({
            url: '/upload/',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false
        }).done(function(res) {
            console.log('success')
        }).fail(function(res) {
            console.log('fail')
        });
    })
})

调整样式

原生H5inputfile太丑陋，调整文件上传样式，可以通过设置Input透明度为零的方式

<div class="ps-image" style="width:300px;height:300px;border:0px sold red; background:url('/images/ps.png')">  
<input type="file" id="file" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>  
</div>