Uno de los requisitos de Bishe es que el front-end debe cargar imágenes.
Escribe un pequeño código de prueba el fin de semana.
Encontré algunos errores extraños, aunque los encontré el fin de semana, todavía tengo que registrarlos.
Tabla de base de datos
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)
Primero, el backend proporciona el código de bytes para importar imágenes a la base de datos.
duda 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)
Duda 2
El problema de la autocodificación, el nombre del archivo de la clase de datos es el mismo que el nombre de la clase, y el código de prueba está escrito en el archivo para iniciar el servicio de puerto.
Sin embargo, cuando se importa el archivo de clase de la base de datos, se crea una instancia del archivo y se inicia el servicio. Como resultado, el servicio iniciado en el archivo de servicio se sobrescribe y algunas interfaces escritas en el archivo de servicio de solicitud siguen indicando que hay un dominio cruzado. Sin embargo, esta es la separación de los extremos anterior y posterior, el extremo posterior siempre está abierto, no hay posibilidad de problemas entre dominios y el valor de retorno de la interfaz que el extremo posterior puede solicitar se modifica, pero el valor de retorno obtenido por el front-end no ha cambiado, sospecho que es caché. El problema es que borre el caché del navegador y el valor de retorno aún no cambia, por lo que apagar y reiniciar está bien, pero reiniciar tampoco funciona. Todo tipo de soluciones, todo tipo de intentos, son desconcertantes. Al final, abrí el archivo de la base de datos sin saber por qué, solo para descubrir que todavía hay un código de prueba aquí, así que lo eliminé con decisión y lo probé nuevamente. Bueno, finalmente funcionó. Esto ha estado dando vueltas durante mucho tiempo,,,,, kao. . . . .
El siguiente es el código de 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>