Bishe の要件の 1 つは、フロントエンドが画像をアップロードする必要があることです。
週末に小さなテスト コードを書きます。
奇妙なバグに遭遇しました。週末に遭遇しましたが、まだ記録する必要があります。
データベース テーブル
def create_table(self):
sql = """CREATE TABLE %s (
`idpic` int(11) NOT NULL auto_increment,
`caption` varchar(45) NOT NULL default '',
`img` mediumblob NOT NULL,
PRIMARY KEY (`idpic`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;""" % self.table
return self.db.cursor().execute(sql)
まず、バックエンドは画像をデータベースにインポートするためのバイトコードを提供します。
疑い 1
这样导入数据可以
sql = """insert into test1 values(%s,%s,%s);""" % ("1", "11", "111")
self.db.cursor().execute(sql)
而这样导入数据不行
sql = """insert into test1 values(%s,%s,%s);""" % ("1", "11", img)
self.db.cursor().execute(sql)
上面两种导入格式不是一模一样吗？？？？？？奇了怪了
而这样导入数据它又行了
sql = """insert into test1 values(%s,%s,%s);"""
args = ("1", "11", img)
self.db.cursor().execute(sql, args)
疑問2
セルフコーディングの問題、データクラスのファイル名がクラス名と同じで、ポートサービスを起動するテストコードがファイルに書かれている。
ただし、データベース クラス ファイルがインポートされると、ファイルがインスタンス化され、サービスが開始されます。その結果、サービス ファイルで開始されたサービスが上書きされ、リクエスト サービス ファイルに記述された一部のインターフェイスで、クロスドメインがあることを示すプロンプトが表示され続けます。ただし、これはフロントエンドとバックエンドの分離であり、バックエンドは常にオープンであり、クロスドメインの問題が発生する可能性はなく、バックエンドが要求できるインターフェースの戻り値は変更されますが、戻り値は問題は、ブラウザのキャッシュをクリアしても戻り値が変わらないため、シャットダウンして再起動しても問題ありませんが、再起動しても機能しません。ありとあらゆる解決策、あらゆる試みが不可解です。結局、なぜかデータベースファイルを開いたところ、ここにまだテストコードが残っていたので、思い切って削除して再度テストしたところ、ようやく動作しました。これはずっと投げていました、、、、、花王。. . . .
以下はフロントエンドコードです
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<button>getImg</button>
<input type="file" id="file">
<img id="img" src="" style="display: block;width: 60%;">
<script>
const btns = document.getElementsByTagName("button")
const getImg = btns[0]
// axios方式
// getImg.onclick = ()=>{
// axios({
// url:"http://localhost:8888/test",
// method:"get",
// responseType:"blob",
// }).then(
// result=>{
// const blog = new Blob([result.data],{type:"image/jpeg"});
// const url = window.URL.createObjectURL(blog);
// const img = document.getElementById("im");
// img.src = url;
// }
// )
// }
getImg.onclick = function(){
// 1.创建对象
const xrp = new XMLHttpRequest();
xrp.open("GET","http://localhost:8888/test")
xrp.responseType = "blob"
xrp.send()
xrp.onreadystatechange = function(){
if(xrp.readyState === 4){
if(xrp.status >=200 && xrp.status < 300){
// 拿到响应体的二进制流数据，并转换成图片。
// 实际上，后端传回来的是在云端的url，把该url直接给img即可，
// 不需要在本地把传回来的二进制流转化成图片，再给图片创建一个url
const blob = new Blob([xrp.response],{
type:"image/jpeg"});
// 创建一个本地的url，
const url = window.URL.createObjectURL(blob);
// 获取img
const img = document.getElementById("img");
// 给img的src 赋值为本地的url
img.src = url;
}
else{
console.log("fuck, error again!!!")
}
}
}
}
// 上传函数
function upload(binary){
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8888/test1");
xhr.overrideMimeType("application/octet-stream");
//直接发送二进制数据
if(xhr.sendAsBinary){
xhr.sendAsBinary(binary);
}else{
xhr.send(binary);
}
// 监听变化
xhr.onreadystatechange = function(e){
if(xhr.readyState===4){
if(xhr.status===200){
// 响应成功
}
}
}
}
// 前端获取二进制数据流，发送给后端
const input = document.querySelector('input[id="file"]')
// 监听事件
input.addEventListener('change', ()=>{
const reader = new FileReader()
reader.readAsArrayBuffer(input.files[0]) // input.files[0]为第一个文件
reader.onload = ()=>{
console.log(reader.result)
upload(reader.result)
}
}, false)
</script>
</body>
</html>