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

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();
  }
}

我可以运行这只 Ant ，它可以工作:

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

以下是混合模式下使用的两种不同方法。在某些情况下这是 Not Acceptable 。

让我们轻声说“React 是个假人”。这是一个附加组件，当涉及到您所依赖的东西但又无法更改时，您应该始终避免使用它。看看什么 SOLID是。

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

第一种方法。使用 XMLHttpRequest

在客户端，您必须使用浏览器中的 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的接口(interface)。通常是异步的，因为最后一次调用仍将通过回调完成。