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>
逻辑实现
文件上传的逻辑处理 python代码
通过uuid生成唯一文件名，并且去除不合法字符，并且通过文件后缀名限制文件类型
@app.route('/upload/',methods={'post'})
def upload():
file=request.files['file']
if file.filename.find('.') > 0:
file_ext=file.filename.rsplit('.',1)[1].strip().lower()
#print(app.config['ALLOWED_EXT'])
if file_ext in app.config['ALLOWED_EXT']:
file_name=str(uuid.uuid1()).replace('-','')+'.'+file_ext
url=save_to_local(file,file_name)
if url!=None:
db.session.add(Image(url,current_user.id))
db.session.commit()
return redirect('/profile/%d' % current_user.id)
def save_to_local(file,file_name):
save_dir=app.config['UPLOAD_DIR']
file.save(os.path.join(save_dir,file_name))
return '/image/'+file_name
在app.conf里设定常量 设置文件格式 以及服务器存放位置
ALLOWED_EXT=set(['png','jpg','jpeg','bmp','gif'])
UPLOAD_DIR='D:/upload/'
通过插件进行测试，返回200，页面跳转到个人主页，即文件上传成功。可以进入到目录查看。
将图片上传到云上
申请七牛云账户，创建存储空间。
查看python sdk开发者文档 七牛Python sdk文档
官方文档
按照文档初始化 上传步骤执行
qiniusdk.py文件
from ins import app
from qiniu import Auth, put_stream, put_data
import os
#需要填写你的 Access Key 和 Secret Key
access_key = app.config['QINIU_ACCESS_KEY']
secret_key = app.config['QINIU_SECRET_KEY']
#构建鉴权对象
q = Auth(access_key, secret_key)
#要上传的空间
bucket_name = app.config['QINIU_BUCKET_NAME']
domain_prefix = app.config['QINIU_DOMAIN']
def qiniu_upload_file(source_file, save_file_name):
# 生成上传 Token，可以指定过期时间等
token = q.upload_token(bucket_name, save_file_name)
ret, info = put_data(token, save_file_name, source_file.stream)
print(type(info.status_code),info)
if info.status_code == 200:
return domain_prefix + save_file_name
return None
upload方法中仅仅更改一行代码，调用qiniusdk中编写的qiniu_upload_file方法，返回上传后的云端url地址，并添加到数据库中
@app.route('/upload/',methods={'post'})
def upload():
file=request.files['file']
file_ext=''
if file.filename.find('.') > 0:
file_ext=file.filename.rsplit('.',1)[1].strip().lower()
if file_ext in app.config['ALLOWED_EXT']:
file_name=str(uuid.uuid1()).replace('-','')+'.'+file_ext
#url=save_to_local(file,file_name)
url=qiniu_upload_file(file,file_name)
if url!=None:
db.session.add(Image(url,current_user.id))
db.session.commit()
打开浏览器，图片上传服务器成功，并且添加到了数据库中。
image.png
