如何自定义LoadIndicator？Drive Apps Script插件自定义加载器问题

我在开发Drive的Apps Script插件，希望从Drive上传文件到服务器期间显示自定义加载器或图片，但使用SpreadsheetApp.getActive().addToUi()时出现报错，相关代码如下：

var buttonActionSelect = CardService.newAction().setFunctionName("MyMethod").setLoadIndicator(SpreadsheetApp.getActive().addToUi()).setParameters({selectedItems: JSON.stringify(selectedItems)});

var button = CardService.newTextButton()
      .setText('Upload File')
      .setOnClickAction(buttonActionSelect)
      .setTextButtonStyle(CardService.TextButtonStyle.FILLED);

首先明确：你用错方法了——SpreadsheetApp.getActive().addToUi()完全不是setLoadIndicator的合法参数，这就是报错的核心原因。

关于setLoadIndicator的原生限制 #

CardService.newAction().setLoadIndicator()只能接受CardService.LoadIndicator的枚举值，官方仅提供三种默认加载状态：

• CardService.LoadIndicator.SPINNER：默认环形加载动画
• CardService.LoadIndicator.NONE：不显示任何加载状态
• CardService.LoadIndicator.CHANGE_INDICATOR：按钮变灰+状态标记的极简提示

目前官方API不支持直接设置自定义图片或加载动画，但可以通过以下两种替代方案实现类似需求：

方案1：用自定义卡片切换实现加载状态 #

点击按钮后，立刻将当前卡片替换为包含自定义加载图的卡片，上传完成后再切回原卡片：

// 按钮点击先触发这个方法，显示加载卡片
function showLoadingCard(e) {
  // 异步触发上传逻辑，上传完成后回调恢复原卡片
  google.script.run.withSuccessHandler(restoreOriginalCard).uploadFiles(e.parameter.selectedItems);
  
  // 构建带自定义加载图的卡片
  var loadingImage = CardService.newImage()
    .setImageUrl("你的自定义加载图公开URL")
    .setAltText("上传中...");
  
  var loadingSection = CardService.newCardSection().addWidget(loadingImage);
  
  return CardService.newCardBuilder()
    .addSection(loadingSection)
    .build();
}

// 上传完成后恢复原卡片
function restoreOriginalCard() {
  // 重新构建你最初的卡片内容
  var originalButton = CardService.newTextButton()
    .setText('Upload File')
    .setOnClickAction(CardService.newAction().setFunctionName("showLoadingCard").setParameters({selectedItems: "..."})
    .setTextButtonStyle(CardService.TextButtonStyle.FILLED);
  
  var originalSection = CardService.newCardSection().addWidget(originalButton);
  
  return CardService.newCardBuilder()
    .addSection(originalSection)
    .build();
}

// 实际执行文件上传的方法
function uploadFiles(selectedItems) {
  // 这里编写你的文件上传逻辑
}

方案2：用HTML弹窗显示自定义加载器 #

如果你的插件支持侧边栏或对话框，可通过HtmlService创建自定义HTML页面，嵌入加载动画或图片：

// 按钮点击触发的方法
function MyMethod(e) {
  // 显示自定义加载弹窗
  var loadingHtml = HtmlService.createHtmlOutput(`
    <div style="text-align:center; padding:20px;">
      <img src="你的自定义加载图公开URL" alt="上传中..." />
      <p>文件上传中，请稍候...</p>
    </div>
  `).setWidth(300).setHeight(200);
  
  SpreadsheetApp.getUi().showModalDialog(loadingHtml, "上传中");
  
  // 执行上传逻辑
  uploadToServer(e.parameter.selectedItems);
  
  // 上传完成后关闭弹窗并提示
  SpreadsheetApp.getUi().alert("上传完成！");
}

注意事项 #

• 自定义加载图的URL必须是公开可访问的，不能用Drive未共享文件的链接，可通过Google Sites或公开图床托管图片
• 异步上传必须依赖google.script.run的回调函数处理UI更新，避免同步操作阻塞界面

内容的提问来源于stack exchange，提问作者civani mahida