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调用。

在服务器端，您必须使用@Autowired UserRepository repository; public void doSomeThings(User userToInsert, String lastnameTodelete){ repository.save(user); // provided crud method repository.deleteByLastname(lastnameTodelete); // generated method thanks to convention } doGet保留功能。始终以清晰，简单的格式传输数据。这样可以节省寻找错误的时间。

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

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

在客户端，您必须使用来自浏览器的doPost调用。

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

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

后果

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

React没有引起问题的原因。如果是这样，则说明您的架构不正确。

如果您想使用google.script.run，则需要考虑第一种方法。

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

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

1 个答案:

第一种方法。使用XMLHttpRequests

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

后果