一、背景
在項目中除了一般的數據傳送以外，剩下的核心部分就是文件、視頻的傳送問題以及用戶狀態權限等。根據實際的項目需求，這里記錄一下vue+flask的文件傳送方式，其他的語言也類似。
二、上傳
上傳內容以前端為主動，后端和服務器為被動
2.1 前端
上傳這里使用了element-ui的upload組件，或者使用fetch進行處理，可以直接參考upload組件的參數就可以完成文件的上傳。
// 直接給出上傳服務器就可
<el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:5000/user/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="uploadFileList" :auto-upload="false">
2.2 后端
flask通過獲取傳過來的file對象，進行文件的存儲，代碼如下。
from flask import request, jsonify from werkzeug.utils import secure_filename @user.route('/upload', methods=['GET', 'POST']) def upload_file(): file_buffer = request.files['file'] f_name = secure_filename(file_buffer.filename) data = {"code": 500, "msg": "上傳失敗！"} try: file_buffer.save(store_file_path + f_name) data.update({"code": 200, "msg": "上傳成功！"}) except FileNotFoundError as e: logging.log("error", e) return jsonify(data)
三、下載
下載內容以后端為主動，前端為被動。
3.1 前端
給出文件列表，通過請求后端的地址獲取數據，在使用blob對象進行文件的下載。流程如下
總代碼
downloadFile: function (filename) { this.$http.post('/api/user/download', { fileName: filename, }).then( response => { var result = response.data.code; if (result === 404) { this.$message({ message: "下載失敗！", type: "error", duration: 1000, }) } else { // 這一部分可以封裝成函數
const conent = response.data; const blob = new Blob([conent], {type: ""}); let fileName = response.headers["content-disposition"].split("=")[1]; if (window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveOrOpenBlob(blob, fileName); } console.log(fileName); // console.log(response.data);
let url = window.URL.createObjectURL(blob); // console.log(url)
let a = document.createElement("a"); document.body.appendChild(a); a.href = url; a.download = decodeURI(fileName); //命名下載名稱
a.click(); //點擊觸發下載
window.URL.revokeObjectURL(url); //下載完成進行釋放
} } ).catch(error => { // console.log("請求超時！請重試！");
this.$message({ message: '下載失敗！請重試！', type: 'error', duration: 1000, }); }) },
3.2 后端
使用發送對象文件的方式將文件信息傳給前端，后端使用send_file的方式。
@user.route('/download', methods=["GET", "POST"]) def download_file(): param = request.json # 獲取文件名
file_name = param.get('fileName') if file_name: # attachment_filename="down.txt", as_attachment=True 附件
return send_file(store_file_path + file_name, mimetype='text/csv', attachment_filename=file_name, as_attachment=True) else: data = { "code": 404, "info": "file no found!" } return jsonify(data)
四、總結
上述內容講述了文件上傳和下載如何使用后端交互的方式，當然除了這種方式也可以使用nginx的代理去實現，與視頻的實現類似。
參考