上传图片至Google Drive后清空表单字段的实现问题

上传JPG文件到Google Drive后，需要自动清空表单文件字段，无需刷新页面即可进行下一次上传。目前文件能成功上传，但表单字段无法重置。

原代码中清空字段的语句放在了表单提交事件监听的外部，且没有等待Google Apps Script的异步上传操作完成就执行，导致上传还未结束就提前执行了清空，同时异步操作的时序错误也使得预期的重置效果无法触发。

HTML代码 #

<html>
 <head>
   <base target="_top">
 </head>
 <body>       
 <form>
   <input type="file" name="file" id="arq" />
   <input type="submit" value="Upload File" id="id"/>
 </form>

<script>   
   const fileInput = document.getElementById('arq');       

   document.querySelector('form').addEventListener('submit',(e)=>{
     e.preventDefault();  

     const file = fileInput.files[0];
     if (!file) return;

     const vFileReader = new FileReader();

     vFileReader.onload = function(e) {
       const vValores = vFileReader.result.split(',');
       const vObj = {
         fileName: file.name,
         mimeType: file.type,
         data: vValores[1] 
       };
       // 仅在上传成功后清空字段
       google.script.run.withSuccessHandler(() => {
         fileInput.value = '';
       }).SubirImagemAntes(vObj);     
     };
     vFileReader.readAsDataURL(file);
   });
</script>
 </body>
</html>

GS代码（保持原逻辑即可） #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function SubirImagemAntes(data) {
  const myFile = Utilities.newBlob(Utilities.base64Decode(data.data), data.mimeType, data.fileName);
  const Id = "你的文件夹ID"; // 替换为实际Google Drive文件夹ID
  const folder = DriveApp.getFolderById(Id);
  const fileAdded = folder.createFile(myFile);

  const resp = {
    'url': fileAdded.getUrl(),
    'name': data.fileName
  };

  return resp;
}

1. 将字段清空逻辑移至google.script.run.withSuccessHandler()的回调函数内，确保只有在文件成功上传至Google Drive后才执行重置操作
2. 缓存DOM元素和文件对象，减少重复DOM查询，提升代码简洁度
3. 添加文件存在判断，避免无文件时触发无效上传

内容的提问来源于stack exchange，提问作者Gutemberg Silveira Alves GTTJ