วิธีการ Upload File ด้วย axios
เนื่องจากมีหลาย Project ที่มีการ upload file ไม่ว่าจะเป็น เอกสาร pdf, word, excel หรือแม้แต่รูปภาพ ในการ upload file ไปสู่ api มี library อยู่หลายตัว แต่ตัวที่ได้รับความนิยมอย่างมากไม่พ้น axios เป็น lib ที่นิยมให้ในหมู่นักพัฒนา React, Vue โดยในบทความนี้เราจะแบ่งออกเป็น 4 กรณีดังนี้
กรณีที่ 1 : api รับเป็น Json และ client ใช้ input type file
ในการ upload file เข้าไปถ้าในกรณีที่ api เขียนแบบรับข้อมูลเป็น json อันนี้เราก็สามารถเปลี่ยน file ที่เรา browse มาจาก input file มาเป็น base64 เพื่อส่งไป api ดังตัวอย่าง
const toBase64 = (file) => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});async function Main() {
const file = document.querySelector('#myfile').files[0];
const fileData = await toBase64(file));
await axios.post("your url", {fileData});}Main();
กรณีที่ 2 : api รับเป็น Form Data และ client ใช้ input type file
ในการ upload file เข้าไปถ้าในกรณีที่ api เขียนแบบรับข้อมูลเป็น FormData อันนี้เราสามารถส่ง file ที่เรา browse มาจาก input file เข้าไปเพื่อส่งไป api ได้เลย โดยในการส่งข้อมูลแบบ Form Data นั้นต้องทำการสร้าง Object Form Data มาก่อน และตอน Post ต้องตั้งค่า Content-Type ของ Header เป็น multipart/form-data ด้วยดังตัวอย่าง
async function Main() {
const file = document.querySelector('#myfile').files[0];
const formData = new FormData();
formData.append("file", file);
await axios.post("your url", formData, {
headers: { "Content-Type": "multipart/form-data" },
});}Main();
กรณีที่ 3 : api รับเป็น Form Data และ client ใช้ text แบบ Base64Url
ในการ upload file เข้าไปถ้าในกรณีที่ api เขียนแบบรับข้อมูลเป็น FormData แต่ client ดึงข้อมูล เอกสารหรือรูปออกมาเป็น text ในรูปแบบ base64 Url มาก่อนแล้ว อันนี้เรา ต้องทำการเปลี่ยน จาก base64 Url ให้เป็น file เสียก่อนทำการส่งข้อมูลไป api และในการส่งข้อมูลแบบ Form Data นั้นต้องทำการสร้าง Object Form Data มาก่อน และตอน Post ต้องตั้งค่า Content-Type ของ Header เป็น multipart/form-data ด้วยดังตัวอย่าง
async function Main() {
const fileData = "your base64 url data";
const resp = await fetch(fileData);
const fblob = await resp.blob();
const file = new File([fblob], "file_name.jpg");
const formData = new FormData();
formData.append("file", file);
await axios.post("your url", formData, {
headers: { "Content-Type": "multipart/form-data" },
});}Main();
กรณีที่ 4 : api รับเป็น Form Data และ client ใช้ text แบบ Base64
ในการ upload file เข้าไปถ้าในกรณีที่ api เขียนแบบรับข้อมูลเป็น FormData แต่ client ดึงข้อมูล เอกสารหรือรูปออกมาเป็น text ในรูปแบบ base64 มาก่อนแล้ว อันนี้เรา ต้องทำการเปลี่ยน จาก base64 ให้เป็น file เสียก่อนทำการส่งข้อมูลไป api และในการส่งข้อมูลแบบ Form Data นั้นต้องทำการสร้าง Object Form Data มาก่อน และตอน Post ต้องตั้งค่า Content-Type ของ Header เป็น multipart/form-data ด้วยดังตัวอย่าง
async function Main() {
const fileData = "data:image/png;base64,"+"your base64 data";
const resp = await fetch(fileData);
const fblob = await resp.blob();
const file = new File([fblob], "file_name.jpg");
const formData = new FormData();
formData.append("file", file);
await axios.post("your url", formData, {
headers: { "Content-Type": "multipart/form-data" },
});}Main();
สำหรับท่านใดที่ลองทำตามแล้วไม่ได้ หรือว่าติดขัดอย่างไรสามารถเข้ามาพูดคุยแลกเปลี่ยนกันได้ที่ facebook : pnpsolution หรือ web site : www.pnpsw.com ได้ครับ
