无法读取在 SMTP js 中发送带有附件的电子邮件中的属性'name' 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+附件

<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 : "[e-mail]",
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>

问题是一旦我点击按钮，我会在控制台中得到错误

未捕获类型错误：无法读取空的属性"0">

Answer 1

表示event.srcElement.files就是null。你的例子并不完备，所以不确定我是否能为你提供更多帮助。Event.srcElement已弃用，取而代之的是Event.target

Answer 2

您通过event.srcElement.files访问文件，但看起来您的函数实际上并没有将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: "[e-mail]",
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>