基于flask和fomantic-ui的简易p2p文件分享平台的手动实现

背景

开学一个多月了，由于繁重的学业和懒惰，都没怎么更新有意思的博客。

前几天突然想到了一个想法。同学之间平常用网络分享一个文件，大部分都是用的qq。但是qq看起来把文件拖到聊天框点击发送就发给对面同学了。但是实际上是先上传到了腾讯的服务器，然后对面的同学再从服务器上下载。

这一上传一下载就很耽误时间。我就想在我的电脑上开一个文件上传服务，别的同学直接上传到我的机械革命上，上传完毕，我就得到了这个文件，不用再下载一遍。而且由于是校园网内的服务，速度也有保障。

语言选择

由于前几天做了几道python flask模板注入的题目，便打算拿flask来当后端练练手，提供http服务。

前端的话还是利用漂亮且方便易用的fomantic-ui解决html和css样式问题，再配合上大大简化js编程的Jquery来写效果和功能。

遇到的困难

单纯的文件上传十分简单。对付小文件还好，但是大文件就会出现页面停滞的情况，而用户收不到任何反馈，不知道到底是在上传还是崩溃了。我们需要设置一个上传进度条来给以用户友善的提示。所以这里就有一个问题，如何获得上传的进度？

查询资料过后，我发现XMLHttpRequest能够获取进度。然后我又发现Jquery中封装的$.ajax能够更加简单的实现。参考链接 https://stackoverflow.com/questions/13203231/is-there-any-way-to-get-jquery-ajax-upload-progress

代码

文件目录

文件目录

  
  
  
  
  


    

    

        

            {% if filelist == [] %}
                

                    
                    目前文件夹里空空如也
                
            {% else %}
                

                {% for file in filelist%}
                    

                        
                        

                            {{file}}
                        
                    
                {% endfor %}
                
            {% endif %}
            

                选择文件
                上传
            
            

                
            
            

            
 
                

                    

                
                

            
        
    

from flask import render_template, Flask, request, make_response, send_from_directory
import os

def get_filelist():
    filelist = os.listdir("upload/")
    return filelist

app = Flask(__name__)

@app.route('/')
def hello(filelist=[]):
    return render_template("index.html", filelist=get_filelist())

@app.route('/upload',methods=['GET','POST'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        print(request.files)
        f.save(f"upload/{f.filename}")
        filelist = get_filelist()
        return render_template("index.html", filelist=filelist)
    else:
        return render_template("index.html", filelist=get_filelist())

@app.route('/download/',methods=['GET'])
def download(filename):
    response = make_response(send_from_directory("upload", filename, as_attachment=True))
    response.headers["Content-Disposition"] = "attachment; filename={}".format(filename.encode().decode('latin-1'))
    return response
  
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=80)

效果

界面

界面

上传1

上传2

上传3

转载申明

本文转载自腾讯博客，转载请注明出处：365文档网