使用 React 和 Google App 脚本将文件上传到 Google Drive

Question

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

谷歌脚本：

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

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

让我们轻声说“React 是一个假人”。这是一个附加组件，当涉及到您所依赖的某些东西时，您应该始终避免使用它，但您无法更改。看看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的接口。通常是异步的，因为最后一次调用仍然会通过回调完成。