flask使用七牛云存储图片并展示

科技2022-08-17 149

注册七牛云，实名认证，点击对象存储，创建公开空间找到python SDK,在项目下创建一个util.py文件，粘贴下去util.py修改如下 from qiniu import Auth, put_file, etag, put_data import qiniu.config import random import datetime from werkzeug.utils import secure_filename # 生成安全的文件名 def upload(filestorage): '''上传图片''' # 需要填写你的 Access Key 和 Secret Key access_key = 'gYE5FmsnJXtAwH2cEhPXQVk' secret_key = 'sV6rNj-q1SX4echtu-Gy-Q' # 构建鉴权对象 q = Auth(access_key, secret_key) # 要上传的空间,自己创建的存储空间 bucket_name = 'flask' # 刚刚创建的公开空间 # 上传后保存的文件名（自定义的，防止文件名冲突） filename = filestorage.filename # 获取文件名（包含后缀名） ran = random.randint(1, 10000) # 一个随机数 now_time = datetime.datetime.now().strftime('%Y%m%d%H%M%S') # 现在的时间 suffix = filename.rsplit('.')[-1] # 切割，获取文件后缀名 # 时间 + 原文件名 + 随机数 + 后缀名 key = str(now_time) + filename.rsplit('.')[0] + str(ran) + '.' + suffix key = secure_filename(key) # 生成上传 Token，可以指定过期时间等 token = q.upload_token(bucket_name, key, 3600) ret, info = put_data(token, key, filestorage.read()) # filestorage.read():文件二进制 # return info, key # key是文件名，用来存储到本地数据库 return ret, info # 返回在flask后端调用，数据库只保存上传后的图片文件名 @user_bp.route('/upload_photo', methods=['GET', 'POST']) def upload_photo(): '''上传图片到七牛云并展示到前端''' # 查询用户图片 photos = Photo.query.filter(Photo.user_id == g.user.id).all() if request.method == 'POST': photo = request.files.get('photo') # 接收图片 ret, info = upload(photo) # 调用上传 if info.status_code == 200: # 文件名添加到数据库 photo = Photo() photo.photo_name = ret['key'] photo.user_id = g.user.id db.session.add(photo) db.session.commit() return 'ok' else: return '失败' return render_template('user/upload_photo.html', photos=photos)

前端展示，CDN 测试域名+图片文件名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>上传图片</h1> <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="photo"><br> <input type="submit" value="上传"> </form> <hr> <h1>展示图片（公开空间域名+图片文件名）</h1> {% for photo in photos %} <img src="http://qhpzt6wpn.hn-bkt.clddn.com/{{ photo.photo_name }}" alt=""> <hr> {% endfor %} </body> </html>

效果

Processed: 0.012, SQL: 9