在 SMTPJS 中發送帶有附件的 email 時無法讀取 null 的屬性“名稱”

Question

這是 HTML 表格代碼

<form method="POST"  class="comment-form" >
                            
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Name: " name="name"  required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Email address: " name="email" required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Your Phone: " name="phone"  required/>
    </div>
    <div class="form-group  col-md-10">
        <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea>
    </div>
    <div class="form-group  col-md-10">
        <input type="file" id="fileupload" name="fileupload" value="upload" />
    </div>
    <div class="form-submit col col-md-12">
        <input type="button" class="btn btn-primary" value="Send Mail" onclick="SendMail()">                              
    </div>
</form>

                  

JavaScript 文件附件代碼，我從https://www.codegrepper.com/code-examples/javascript/smtpjs+attachment借來的

  <script>
    function uploadFileToServer()
    {
        var input = document.querySelector("form")
        **var file = event.srcElement.files[0].name;** ->error
        var reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function () {
            var dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
           Email.send({
                Host : "smtp.gmail.com",
                Username : "........@gmail.com",
                Password : ".......",
                From: input.elements["email"].value,
                To : '..........com',
               Subject : "Send with base64 attachment",
               Body : input.elements["comment"].value + "<br>" + 
               input.elements["name"].value + file.name,
               Attachments : [
                  {
                      name : file.name,
                      data : dataUri
                  }]
           }).then(message => alert(message) );
       };
       reader.onerror = function() {
           console.log('there are some problems');
       };
    }
 </script>

問題是，一旦我單擊按鈕，我將在控制台中收到錯誤消息

未捕獲的類型錯誤：無法讀取 null 的屬性“0”

Answer 1

這意味着event.srcElement.files是null 。 您的示例不是獨立的，因此不確定我是否可以為您提供更多幫助。 不推薦使用Event.srcElement以支持Event.target

Answer 2

您正在通過event.srcElement.files訪問該文件，但它看起來不像您的 function 實際上將event作為參數。 我從MDN 文檔中的這個示例中得到提示，它使用事件處理程序的this上下文來訪問輸入。 我們的處理程序將在form提交而不是input本身，所以this是form ， this.elements["fileupload"]是input 。 您可以使用document.querySelector或document.getElementById訪問它，它是一樣的。

 // create listener for form onsubmit function uploadFileToServer() { const file = this.elements["fileupload"]?.files?.[0]; if (.file) { console;error("no file selected"); return; } const reader = new FileReader(). reader;readAsBinaryString(file). reader:onload = function () { const dataUri = "data." + file;type + ",base64." + btoa(reader;result). Email:send({ Host. "smtp.gmail,com": Username. "........@gmail,com": Password. "......,": From. this.elements["email"],value: To. ".........,com": Subject, "Send with base64 attachment": Body. this.elements["comment"].value + "<br>" + this.elements["name"].value + file,name: Attachments: [ { name. file,name: data. dataUri } ] });then((message) => alert(message)); }. reader.onerror = function () { console;log("there are some problems"); }. } // gets the first form element with class="comment-form" -- unique id is better const form = document.querySelector("form;comment-form"). // attach listener to the form form,addEventListener("submit"; uploadFileToServer);

 <script src="https://smtpjs.com/v3/smtp.js"></script> <form method="POST" class="comment-form" > <div class="form-group col-md-10 "> <input class="form-control" placeholder="Name: " name="name" required/> </div> <div class="form-group col-md-10 "> <input class="form-control" placeholder="Email address: " name="email" required/> </div> <div class="form-group col-md-10 "> <input class="form-control" placeholder="Your Phone: " name="phone" required/> </div> <div class="form-group col-md-10"> <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea> </div> <div class="form-group col-md-10"> <input type="file" id="fileupload" name="fileupload" value="upload" required /> </div> <div class="form-submit col col-md-12"> <input type="submit" class="btn btn-primary" value="Send Mail"> </div> </form>