Um dos requisitos do Bishe é que o front-end precisa fazer upload de fotos.
Escreva um pequeno código de teste no fim de semana.
Encontrei alguns bugs estranhos, embora os tenha encontrado no fim de semana, ainda tenho que registrá-los.
Tabela de banco de dados
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)
Primeiro, o back-end fornece o bytecode para importar imagens para o banco de dados.
dúvida 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)
Dúvida 2
O problema da autocodificação, o nome do arquivo da classe de dados é o mesmo que o nome da classe e o código de teste é gravado no arquivo para iniciar o serviço de porta.
No entanto, quando o arquivo de classe do banco de dados é importado, o arquivo é instanciado e inicia o serviço. Como resultado, o serviço iniciado no arquivo de serviço é substituído e algumas interfaces gravadas no arquivo de serviço de solicitação continuam informando que há um domínio cruzado. No entanto, esta é a separação dos front-ends e back-ends, o back-end está sempre aberto, não há possibilidade de problemas entre domínios e o valor de retorno da interface que o back-end pode solicitar é modificado, mas o valor de retorno obtido pelo front-end não mudou, suspeito que seja cache O problema é limpar o cache do navegador e o valor de retorno ainda não muda, então desligar e reiniciar está bom, mas reiniciar também não funciona. Todos os tipos de soluções, todos os tipos de tentativas são intrigantes. No final, abri o arquivo do banco de dados sem saber por que, apenas para descobrir que ainda havia um código de teste aqui, então apaguei-o decisivamente e testei novamente. Bem, finalmente funcionou. Isso está jogando há muito tempo,,,,, kao. . . . .
O seguinte é o código front-end
<!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>