How to quickly build a file transfer service with Python

When my friend needs to transfer files from his computer to my computer, I just need to start the service

Start the service!

Insert image description here

He opens the web interface

I can transfer the file to my computer (and can also display the progress in real time)

The file is already in the uploads folder on my computer.

The project structure is as follows

templates store front-end html files

updoad.html interface for uploading files

uploads stores files uploaded by users

Preparation materials for medical research.zip file just uploaded

upload.py backend service file

When you and your friends are in the same LAN, of course you can transmit remotely based on the host's IP. When the two of you are not in the same network, you can use frp intranet penetration to change the IP of a host into a public IP, and you can also transmit in real time.

Advantages :

Simple and fast, no need to open QQ, WeChat and other software to transfer
No file size limit
Progress displayed in real time
There is no need to connect to the LAN, and it is very fast.

Backend service construction

Use flask to build web services

from flask import Flask, render_template, request, jsonify
import os

app = Flask(__name__)

UPLOAD_FOLDER = 'uploads'  # 上传文件保存的目录
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/')
def index():
    return render_template('upload.html')

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    if file:
        filename = file.filename
        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
        file.save(file_path)
        return '文件上传成功！'

@app.route('/progress', methods=['POST'])
def progress():
    uploaded_bytes = request.form['uploadedBytes']
    total_bytes = request.form['totalBytes']
    progress = int(uploaded_bytes) / int(total_bytes) * 100
    return jsonify(progress=progress)

if __name__ == '__main__':
    app.run(debug=True)

Only three interfaces need to be defined

/: Access the html page by default for user operations
/upload: Post interface for uploading files
/progress: Post interface that displays progress in real time

Front page writing

<!doctype html>
<html>
  <head>
    <title>文件上传</title>
    <script>
      function uploadFile() {
      
      
        var fileInput = document.getElementById('file');
        var file = fileInput.files[0];

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/upload');

        xhr.upload.onprogress = function(event) {
      
      
          if (event.lengthComputable) {
      
      
            var progress = Math.round((event.loaded / event.total) * 100);
            document.getElementById('progress').innerText = progress + '%';
          }
        };

        xhr.onload = function() {
      
      
          if (xhr.status === 200) {
      
      
            document.getElementById('progress').innerText = '上传完成';
          }
        };

        var formData = new FormData();
        formData.append('file', file);
        xhr.send(formData);
      }

      function updateProgress() {
      
      
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/progress');

        xhr.onload = function() {
      
      
          if (xhr.status === 200) {
      
      
            var progress = JSON.parse(xhr.responseText).progress;
            document.getElementById('progress').innerText = progress + '%';
          }
        };

        xhr.send();
      }

      setInterval(updateProgress, 1000);  // 每秒更新一次进度

    </script>
  </head>
  <body>
    <h1>文件上传</h1>
    <input type="file" id="file">
    <button onclick="uploadFile()">上传</button>
    <div id="progress"></div>
  </body>
</html>

Just need to execute two functions

onload(): file upload function, calling the background upload file upload interface
updateProgress(): Regularly access the progress interface that displays progress in the background to obtain the progress of file upload. After the progress is calculated, the percentage is displayed to the user.

In this way, anyone can open the browser and send the files on his computer to me.