javascript 上传图像到谷歌驱动器没有文件输入字段

rqenqsqc  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(153)

我需要通过nodejs上传一个图像到谷歌驱动器裁剪后,它的图像裁剪库。以前我上传的图像与文件输入字段,所以我可以得到缓冲区(使用express-fileupload库)的图像在后端(nodejs)。现在的问题是,裁剪后,我有图像的形式

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA....

如何发送这种形式的图像到后端,这样我们就可以得到该图像的缓冲区,以便上传到谷歌驱动器。否则,我们可以直接上传到谷歌驱动器在前端(javascript)?。我尝试使用FormData,但我只能得到字符串没有缓冲区。

hwamh0ep

hwamh0ep1#

  • 这取决于后端和前端的连接方式,因为您无法使用HTTP POST将此格式的映像传输到后端,因为HTTP POST的最大大小为64 KB
  • 但是,使用WebSocket/WebRTC库(如Socket.io)将图像以blob形式发送到后端是非常可能的
  • 例如,让我们以express后端和传统的静态html主页为例,其中包含一些javascript * 示例 *
//my webpage which has the blob this is some browser javascript connected to a html file
    //Hosted on http://localhost:3000
          var base64data
    //I have a cake.png in my static directory
            fetch("cake.png")
                .then(response => response.blob())
                .then(blob => {
                    const fileReader = new FileReader();
                    fileReader.readAsDataURL(blob);
                    fileReader.onloadend = function() {
                        base64data = fileReader.result;
                    }
                })
            .catch(error => {
                console.error(error);
            });
          const socket = io("http://localhost:4000")
            socket.on('connect',()=>{
    //Sent this blob to the server
              socket.emit('blob',base64data)
            })

我的nodejs文件,其中包含socket.io和驱动器APISocket.io服务器,托管在http://localhost:4000上

const { Server } = require("socket.io");
const google = require("googleapis");
const io = new Server(4000, {
    cors: {
        "Access-Control-Allow-Origin": "*",
        methods: ["GET", "POST", "OPTIONS"],
    },
});
/*Initialize the drive
 *......
 *......
 */
io.on("connection", (socket) => {
    socket.on("blob", (blob) => {
        drive.files.create({
            requestBody: {
                name: "image.png",
                mimeType: "image/png",
            },
            media: {
                mimeType: "image/png",
                body: blob,
            },
        });
    });
});

因此,在创建文件时,blob可用作body的输入

相关问题