使用的是 python的flask框架。
想要實作的功能，將 canvas 上的圖片 上傳到 “演算法服務器端，假設是服務器A”。
目前的思路，是將 canvas 先上傳到 flask服務器端，即web服務器端，即服務器B，再通過tcp傳輸到服務器A（這段tcp代碼會寫）。
目前的問題就出在 “將canvas 先上傳到 flask服務器端”這個地方。
下面是主要的代碼：
其中js代碼主要參考知乎 https://www.zhihu.com/question/60593079/answer/247418738
js端代碼：
$("#SubmitVideoPicture").on('click', function () {
let meetingName = $("#meeting_name").val();
let personName = $("#personName").val();
// 去除前后空格
personName = personName.replace(/(^\s*)|(\s*$)/g, "");
// personName = personName.replace(/^\s+/, "");
// personName = personName.replace(/\s+$/, "");
// 得到 影像的名稱
let imageName = meetingName + "_" + personName + ".jpeg";
// 下面是遮罩層（可以不管）
//獲取檔案的寬和高
let maskWidth = $(document).width();
let maskHeight = $(document).height();
//遮罩層初始化
$('<div class="mask"></div>').appendTo($('body'));
$('div.mask').css({
'position':'absolute',
'top':0,
'left':0,
'background':'black',
'opacity':0.5,
'width':maskWidth,
'height':maskHeight,
'z-index':9999
});
// 上傳到服務器（這部分的代碼就是參考知乎上的）
var arr = dataUrl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
var obj = new Blob([u8arr], {type:mime});
var data = new FormData();
// 知乎的代碼始終弄不出來，自己弄了這個，還出來了一部分
// data.append("upfile", obj, imageName);
data.append("fileData", obj);
data.append("fileName", imageName);
console.log(data);
console.log(data.get("fileData"));
console.log(data.get("fileName")); // 這幾個 console.log 的輸出見下圖
// ajax傳輸
$.ajax({
url: "/submit_video_picture",
type:"POST",
processData:false,
contentType:false, // 不加這兩行會報錯，原因不明
data: data,
success:function (e) {
switch (e) {
case 'success':
alert("已經上傳成功！");
break;
default:
alert("奇怪的bug~上傳失敗了！");
break;
}
$('div.mask').remove();
},
error:function () {
alert("上傳失敗了！");
$('div.mask').remove();
}
})
});console.log(data);
console.log(data.get("fileData"));
console.log(data.get("fileName")); // 這幾個 console.log 的輸出見下圖 的輸出：
上述代碼中這三個console.log的輸出：
后端flask的代碼：
@app.route('/submit_video_picture', methods=['POST'])
def submit_video_picture():
if (request.method == 'POST'):
print("333")
data = request.form.get("data")
print(data)
data = request.form.get("fileData")
print(data)
data = request.form.get("fileName")
print(data)
# data = request.get_data()
# print(data)
# print(type(data))
return 'success'
得到的輸出是這樣的：
也就是之前的 data.append("fileName", imageName); 部分被成功的傳輸到了后臺，但是這個 canvas 一直為 None，該如何傳輸到后臺？我想把這個 convas 傳輸到后臺（即服務器A上）保存成 jpeg 的格式，再通過tcp 傳到 演算法服務器端（即服務器B）。
請問該如何解決這個問題？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/13732.html
標籤：Ajax
上一篇：用vue封裝loading組件