文件上傳是一項必要的功能,幾乎在所有的應用程序中都會用到。本篇文章將向您介紹一個快捷、便捷、安全的文件上傳接口,並為您提供完整的代碼示例。
一、選擇上傳文件
在使用文件上傳接口之前,首先需要實現文件選擇功能。在前端頁面中,可以使用HTML中的input標籤,並給其添加type=’file’屬性,如下所示:
<input type='file' name='file' />
在後端代碼中,可以使用Python中的flask框架,如下所示:
from flask import Flask, request
app = Flask(__name__)
@app.route('/upload', methods=['POST'])
def upload_file():
file = request.files['file']
file.save('uploads/' + file.filename)
return 'upload success!'
if __name__ == '__main__':
app.run()
上述代碼中,我們使用了flask框架來創建一個後端應用程序,並在其中實現了文件上傳的相關功能。其中,使用了request對象中的files屬性來獲取上傳的文件,並使用了save()方法將文件保存到指定的文件夾路徑。
二、限制文件上傳類型和大小
為了確保系統的安全性和穩定性,我們需要限制用戶上傳的文件類型和大小。在前端頁面中,我們可以使用HTML的accept屬性,如下所示:
<input type='file' name='file' accept='image/*' />
在後端代碼中,我們可以使用flask框架的request對象和werkzeug庫中的FileStorage對象,如下所示:
from flask import Flask, request
from werkzeug.utils import secure_filename
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ALLOWED_EXTENSIONS'] = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
@app.route('/upload', methods=['POST'])
def upload_file():
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return 'upload success!'
else:
return 'file type not allowed!'
if __name__ == '__main__':
app.run()
上述代碼中,我們為應用程序設置了上傳文件的存儲路徑、允許上傳的文件類型和大小。並使用了allowed_file()方法來判斷上傳的文件類型是否在允許的列表中。如果是,則使用secure_filename()方法確保文件名的安全性,並使用save()方法保存文件到指定的文件夾路徑。如果不是,則返回錯誤信息。
三、進度顯示和斷點續傳
為了提高用戶體驗,我們可以為文件上傳添加進度顯示和斷點續傳的功能。在前端頁面中,可以使用HTML5自帶的XMLHttpRequest對象和FormData對象,並依賴於jQuery庫進行封裝,如下所示:
$('form').submit(function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if(xhr.upload) {
xhr.upload.addEventListener('progress', function(event) {
var percent = Math.floor(event.loaded / event.total * 100);
$('progress').attr('value', percent);
$('.progress-bar').width(percent + '%');
$('.progress-bar').text(percent + '%');
}, false);
}
return xhr;
},
type: 'POST',
url: '/upload',
data: formData,
processData: false,
contentType: false,
success: function(data) {
alert(data);
}
});
});
在後端代碼中,我們需要使用flask框架的session對象來保存上傳文件的狀態和進度信息。代碼如下所示:
from flask import Flask, request, session
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './uploads'
app.config['ALLOWED_EXTENSIONS'] = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024
app.secret_key = 'secret key'
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
@app.route('/upload', methods=['POST'])
def upload_file():
file = request.files['file']
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
if os.path.exists(file_path):
session['upload_status'] = 'complete'
return 'upload success!'
else:
if not session.get('upload_status'):
session['upload_status'] = 'in progress'
session['upload_size'] = 0
file.save(file_path)
session['upload_size'] += os.path.getsize(file_path)
return str(session['upload_size'])
else:
return 'file type not allowed!'
if __name__ == '__main__':
app.run()
上述代碼中,我們使用session對象來保存上傳文件的狀態和進度信息。首先,判斷上傳的文件是否已經存在於文件夾中,如果是,則直接返回成功信息。如果不是,則判斷session中是否保存了上傳狀態。如果沒有保存,則說明上傳開始,創建新的session對象,並將上傳狀態設置為’ in progress’。如果已經保存了,則說明上傳已經開始,繼續向文件中寫入數據,並累加上傳進度信息。最後,將上傳進度以字符串形式返回給前端頁面。
原創文章,作者:WCAR,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/131380.html
微信掃一掃
支付寶掃一掃