前端-后端-数据库：图片交互

最新推荐文章于 2024-02-27 15:45:11 发布

外星球的地球人是外星人吗？

最新推荐文章于 2024-02-27 15:45:11 发布

阅读量1.0k

点赞数

分类专栏： 11 文章标签：经验分享

本文链接：https://blog.csdn.net/wjl__ai__/article/details/122075186

版权

11 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

毕设其中有一个需求，就是前端需要上传图片。
周末就写一下小测试代码。
其中遇到一些奇奇怪怪的bug，虽然是周末遇到的，还是要记录一下。
数据库表

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)

疑惑二
自己编码的问题，数据类的文件名和类名相同，而且该文件写了测试代码，启动端口服务。
然而，导入数据库类文件时，实例化了改文件，它就启动服务了。导致在服务文件启动的服务被覆盖，请求服务文件里写的一些接口，一直提示存在跨域。然而，这是前后端分离的，后端一直开放的，不可能存在跨域问题，而且修改了后端可以请求的接口的返回值，但是前端获取到的返回值一直没变，我怀疑是缓存问题，把浏览器的缓存清空，返回值还是没变，那么关机重启好吧，但是重启也不行。各种找解决办法，各种尝试，百思不得其解。最终，也不知道怎么就打开了数据库类文件，才发现这里竟然还有测试代码，果断删掉，再次测试，额，它终于行了。这折腾了大半天了，，，，，kao。。。。。

以下是前端代码

<!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>