前端--->服务器
用户在前端直接点击上传图片，图片则直接保存在服务器本地，这样编程虽然简单，但是当图片逐渐多起来的时候，就会很占服务器的磁盘资源，并且如果想对图片做一些处理，比如控制图片大小，是否加上水印等等就很麻烦。所以不推荐使用该保存方式。示例代码：
前端主要代码：
<form action="{{ url_for('upload_row') }}" method="post" enctype="multipart/form-data">
<label for="fid"><input type="file" id="fid" name="f1"></label>
<input type="submit" value="上传">
</form>
后端代码：
# 保存到服务器本地
@cms_bp.route("/upload_row/", endpoint="upload_row", methods=["GET", "POST"])
def upload_row():
# 文件对象保存在request.files上，并且通过前端的input标签的name属性来获取
fp = request.files.get("f1")
# 保存文件到服务器本地
fp.save("a.jpg")
return redirect(url_for("cms.index"))
前端--->服务器--->七牛云
用户先将图片上传到服务器，服务器做一些过滤等其他图片处理操作后，再将图片上传到七牛云上，服务器只需要保存七牛云返回的图片外链，这样就可以大大的节省服务器空间，但是这个过程服务器既需要接收用户的请求，又需要请求七牛云，这样就很占服务器带宽，降低性能。
前端代码：
<form action="{{ url_for('upload_qn') }}" method="post" enctype="multipart/form-data">
<label for="fid2"><input type="file" id="fid2" name="f2"></label>
<input type="submit" value="上传">
</form>
后端代码：
from qiniu import Auth, put_data
# 用户上传到服务器，服务器再上传到七牛云
@cms_bp.route("/upload_qn/", endpoint="upload_qn", methods=["GET", "POST"])
def upload_qiniu():
fp = request.files.get("f2")
file_name = fp.filename
# 需要填写你的 Access Key 和 Secret Key
ak = "******"
sk = "******"
# 构建鉴权对象
q = Auth(ak, sk)
# 要上传的空间
bucket_name = 'shop'
# 上传到七牛后保存的文件名
key = file_name
# 生成上传 Token，可以指定过期时间等
token = q.upload_token(bucket_name, key, 3600)
ret, info = put_data(token, key, data=fp.read())
# 如果上传成功
if info.status_code == 200:
# 数据库保存该地址
img_url = "七牛云域名" + ret.get("key")
return "success"
前端--->七牛云
为了省去中间途径服务器的消耗，前端可以直接上传图片到七牛云，七牛云返回该图片的外链，我们则将外链保存到一个隐藏的input标签上，最后前端提交form表单时将外链提交到服务器保存，因为该过程会使用到很多七牛云为我们写好的JS，具体开发教程请参考七牛云JS SDK文档。这只贴出主要代码。
前端代码：
<button id="upload-btn">上传文件</button>
<input type="text" id="image-input">
<img src="" alt="" id="img" width="50px">
前端的所有效果通过JS实现，具体JS参考开发文档。
后端代码：
后端只需要编程生成上传图片的token即可
from qiniu import Auth
# 前端直接上传到七牛云
@cms_bp.route("/generate_token/", endpoint="ge_token")
def generate_token():
# 需要填写你的 Access Key 和 Secret Key
access_key = current_app.config.get("ACCESSKEY")
secret_key = current_app.config.get("SECRETKEY")
# 构建鉴权对象
q = Auth(access_key, secret_key)
# 要上传的空间
bucket_name = 'shop'
# 生成上传 Token，可以指定过期时间等
# 3600为token过期时间，秒为单位。3600等于一小时
token = q.upload_token(bucket_name, expires=3600)
return jsonify({"uptoken": token})
总结：最后一种图片上传方式，可以将流量的消耗直接转加给用户，减轻服务器压力，所以推荐第三种方式，并且七牛云上提供了很多定制化的接口，可以对图片、视频等等作出定制化处理，第三种方式的js很长，大家可以去开发文档查看，修改成自己需要的，如果不成功，可以给我留言，我发给你Demo。
网友评论