从React.js发送带有文件附件的电子邮件

Question

所以我只使用前端，我需要有一个带有文件附件的联系人表单。

为此，我决定使用emailjs和易于设置的一切只是为了电子邮件。当我添加一个文件并在电子邮件中发送它时，我得到[object object]。

这是我的字体结束代码:

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
export const ContactUs = () => {
const form = useRef();
const addFile = () => {
inputFile.current.click();
};
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
};
return (
<form ref={form} onSubmit={sendEmail}>
<label>Name</label>
<input type="text" name="user_name" />
<label>Email</label>
<input type="email" name="user_email" />
<label>Message</label>
<textarea name="message" />
<input
name="image"
type="file"
onClick={addFile}
ref={inputFile}
value={file}
onChange={(event: any) => setFile(event.target.value)}
/>
<input type="submit" value="Send" />
</form>
);
};

那么我做错了什么?也许有其他第三方电子邮件服务，他们有一个更好的文档与文件附件的反应?

谢谢你的建议!

Answer 1

能够在邮件中发送附件。首先，你必须更新你的EmailJS帐户。免费帐户不允许文件附件。在非免费帐户中，可以通过两种方式添加文件附件——通过emailjs.send()调用以编程方式传递附件内容，或者允许用户上传文件。后者是通过创建带有文件输入字段的表单，并通过emailjs.sendForm()发送电子邮件来完成的。首先打开模板编辑器- Attachments选项卡，然后添加一个附件。

代码范例JS

function formSubmit(event) {
event.preventDefault();
emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', this);}

HTML

<form enctype="multipart/form-data" method="post" onsubmit="formSubmit()">
<label>Attach file:</label>
<input type="file" name="my_file"> 
<input type="submit" value="Submit">
</form>