将图片上传到云上
申请七牛云账户,创建存储空间。
# -*- 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>