使用React和Google App脚本将文件上传到Google云端硬盘

Question

我正在尝试使用Google App脚本和React上传文件。

Google脚本：

function uploadArquivoParaDrive(base64Data, nomeArq, idPasta) {
  try{
    var splitBase = base64Data.split(','),
    type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(nomeArq);

    var file = DriveApp.getFolderById(idPasta).createFile(ss);

    return file.getName();
  }catch(e){
    return 'Erro: ' + e.toString();
  }
}

我可以运行此蚂蚁它的工作原理：

function uploadFile() {
  var image =   UrlFetchApp.fetch('url to some image').getBlob();
  var file = {
    title: 'google_logo.png',
    mimeType: 'image/png'
  };
  file = Drive.Files.insert(file, image);
  Logger.log('ID: %s, File size (bytes): %s', file.id, file.fileSize);
}

这是React脚本：

onSubmit = (e) => {
    e.preventDefault();

    axios.get(url, {...this.state}, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    }, (response) => {
        console.log(response);
    })

};

 setFile = (event) => {
    console.log(event.target.files)
     this.setState({file: event.target.files[0]});
};

render() {

    return (
        <form>
            <input type="file" id="file" onChange={this.setFile} />
            <button onClick={this.onSubmit}>ADD</button>
        </form>
    )
}

我正在尝试POST ，但得到了400条响应。 我知道这不是GET请求，但是有了它，我得到了-200无响应。

我可以在工作表中插入行，但是我想使用Google App Scripts将文件上传到Google云端硬盘。

我知道有一种方法可以通过Google Scripts和React上传文件，因为有一种没有React的方法（ google.script.run ）。

Answer 1

这是在混合模式下使用的两种不同方法。 在某些情况下，这是不可接受的。

让我们轻声地说“反应是一个假人”。 这是一个附加组件，当您要依靠的某些组件出现某种变化但您无法更改时，应始终避免这样做。 查看SOLID是什么。

下面始终假定您正在使用浏览器。 您的网页托管在Google Apps脚本的网络应用程序中。

第一种方法。 使用XMLHttpRequests

在客户端，您必须使用浏览器中的XMLHttpRequests调用。

在服务器端，您必须使用doGet doPost保留的函数。 始终以清晰，简单的格式传输数据。 这样可以节省搜索错误的时间。

示例https://stackoverflow.com/a/11300412/1393023

第二种方法。 使用客户端API

在客户端，您必须使用浏览器中的google.script.run调用。

在服务器端，您必须使用功能。 始终以清晰，简单的格式传输数据。 这样可以节省搜索错误的时间。

示例https://stackoverflow.com/a/15790713/1393023

后果

您的示例具有混合方法的迹象。 不幸的是，它无法快速调试。

React没有理由导致此问题。 如果是这样，则您的体系结构是不正确的。

如果要使用axios ，则需要考虑第一种方法。

如果要使用google.script.run则需要捕获onSubmit然后需要调用实现google.script.run的接口。 通常是异步的，因为上一次调用仍将通过回调完成。