google drive 前端上传

最新推荐文章于 2024-09-23 16:36:59 发布
lz678
最新推荐文章于 2024-09-23 16:36:59 发布
阅读量615
点赞数
文章标签：前端 javascript vue.js google drive
本文链接：https://blog.csdn.net/lz678/article/details/122432923
版权
粘贴到项目中，并运行。
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta
            name="description"
            content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
    <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
    <p>Drive API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" style="display: none;">Authorize</button>
    <button id="signout_button" style="display: none;">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>
    <input type="file" id="inputId" οnchange="_change(event)"/>
    <button οnclick="_click()">上传</button>
</div>
<script type="text/javascript">
    let fileData={}
    // Client ID and API key from the Developer Console
    let CLIENT_ID = "本因应用的CLIENT_ID"
    let API_KEY ="本因应用的API_KEY"

    // Array of API discovery doc URLs for APIs used by the quickstart
    let DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];

    // Authorization scopes required by the API; multiple scopes can be
    // included, separated by spaces.
    // var SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly';
    let SCOPES = 'https://www.googleapis.com/auth/admin.directory.user https://www.googleapis.com/auth/drive';
    // var SCOPES = ["https://www.googleapis.com/auth/admin.directory.group","https://www.googleapis.com/auth/admin.directory.user","https://www.googleapis.com/auth/drive"];

    let authorizeButton = document.getElementById('authorize_button');
    let signoutButton = document.getElementById('signout_button');

    /**
     *  On load, called to load the auth2 library and API client library.
     */
    function handleClientLoad() {
        gapi.load('client:auth2', initClient);
    }
    function _change(event) {
        console.log(event.target.files[0],'event.target.files[0]')
        let file=event.target.files[0]
        let name=file.name
        let type=file.type
        fileData.file=file
        fileData.name=name
        fileData.type=type
    }
    function _click() {
        let file = new Blob([fileData.file]);
        let metadata = {
            "name": fileData.name,
            "mimeType": fileData.type,
            // "parents": ["folder id or 'root'"], // Google Drive folder id
        };
        let accessToken = gapi.auth.getToken().access_token;//获取accessToken
        let form = new FormData();
        form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
        form.append('file', file);
        fetch("https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart", {
            method: 'POST',
            headers: new Headers({ 'Authorization': 'Bearer ' + accessToken }),
            body: form,
        }).then((res) => {
            return res.json();
        }).then(function(val) {
            console.log(val);
        });

        // gapi.client.drive.files.create({
        //     'content-type': 'application/json',
        //     uploadType: 'multipart',
        //     name: 'photo1.png',
        //     mimeType: 'image/png',
        //     fields: 'id, name, kind, size'
        // }).then(apiResponse => {
        //     console.log(apiResponse, 'apiResponse');
        // })
    }
    /**
     *  Initializes the API client library and sets up sign-in state
     *  listeners.
     */
    function initClient() {
        gapi.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
        }).then(function () {
            // Listen for sign-in state changes.
            gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

            // console.log(gapi.auth2.GoogleUser,'gapi.auth2.getAuthResponse')

            // Handle the initial sign-in state.
            updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
            authorizeButton.onclick = handleAuthClick;
            signoutButton.onclick = handleSignoutClick;
        }, function (error) {
            appendPre(JSON.stringify(error, null, 2));
        });
    }

    /**
     *  Called when the signed in status changes, to update the UI
     *  appropriately. After a sign-in, the API is called.
     */
    function updateSigninStatus(isSignedIn) {
        if (isSignedIn) {
            authorizeButton.style.display = 'none';
            signoutButton.style.display = 'block';
            listFiles();
        } else {
            authorizeButton.style.display = 'block';
            signoutButton.style.display = 'none';
        }
    }

    /**
     *  Sign in the user upon button click.
     */
    function handleAuthClick(event) {
        gapi.auth2.getAuthInstance().signIn();
    }

    /**
     *  Sign out the user upon button click.
     */
    function handleSignoutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
    }

    /**
     * Append a pre element to the body containing the given message
     * as its text node. Used to display the results of the API call.
     *
     * @param {string} message Text to be placed in pre element.
     */
    function appendPre(message) {
        var pre = document.getElementById('content');
        var textContent = document.createTextNode(message + '\n');
        pre.appendChild(textContent);
    }

    /**
     * Print files.
     */
    function listFiles() {
        gapi.client.drive.files.list({
            'pageSize': 10,
            'fields': "nextPageToken, files(id, name)"
        }).then(function (response) {
            console.log(response,'response')
            appendPre('Files:');
            var files = response.result.files;
            if (files && files.length > 0) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    appendPre(file.name + ' (' + file.id + ')');
                }
            } else {
                appendPre('No files found.');
            }
        });
    }


</script>

<script async defer src="https://apis.google.com/js/api.js"
        οnlοad="this.οnlοad=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>