از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
Axios Multipart Form Data – ارسال فایل از طریق فرم با JavaScriptMultipart/Form-Data یکی از انواع رمزگذاری است که اجازه می دهد فایل ها قبل از انتقال به سرور برای پردازش در داده های فرم شما گنجانده شوند. سایر انواع رمزگذاری را می توان برای دستیابی به انتقال غیر فایل استفاده کرد: application/x-www-form-urlencoded – داده ها را به عنوان یک رشته پرس و جو رمزگذاری می کند – جفت های کلید-مقدار را جدا می کند (تخصیص داده شده…
سرفصلهای مطلب
معرفی
چندبخشی/فرم-داده یکی از انواع رمزگذاری است که به فایل ها اجازه می دهد قبل از اینکه برای پردازش به سرور منتقل شوند در داده های فرم شما گنجانده شوند. سایر انواع رمزگذاری را می توان برای دستیابی به انتقال غیر فایل استفاده کرد:
- application/x-www-form-urlencoded – داده ها را به صورت یک رمزگذاری می کند رشته پرس و جو – جداسازی جفت های کلید-مقدار (تخصیص داده شده با
=)، با نمادهایی مانند&. - چند بخشی/فرم-داده – اجازه دهید فایل ها به عنوان داده های فرم درج شوند.
- متن/ساده – داده ها را به صورت متن ساده (بدون رمزگذاری) ارسال می کند و بیشتر برای اشکال زدایی استفاده می شود نه تولید.
و هر یک از اینها را می توان از طریق (اختیاری) به تگ فرم HTML اضافه کرد enctype صفت:
<form action="/path/to/api" method="POST" encytpe="ENCTYPE_HERE">
</form>
آنها به روشی نسبتاً ساده عمل می کنند، و احتمالاً آنها را دیده اید که با یک HTML به کار گرفته شده اند. <form> با این حال، تگ قبل از آن، پیش‌فرض برای اکثر موارد به خوبی کار می‌کند، بنابراین ویژگی معمولا حذف می‌شود.
در این راهنما، روش ارسال ناهمزمان فایل‌ها و سایر داده‌های فرم را با Axios به سرور Node.js (Express) و همچنین روش دریافت این داده‌ها در backend برای پردازش را بررسی خواهیم کرد.
نصب Axios
Axios یک سرویس گیرنده HTTP مبتنی بر Promise (ناهمزمان) است که در حال حاضر و استفاده می شود زیاد پروژه های Node.js! استفاده از Axios برای ارسال درخواست های HTTP بسیار رایج است fetch().
اگر می‌خواهید درباره ارسال درخواست‌های HTTP با بیشتر بخوانید
fetch()– استفاده از fetch ما برای ارسال درخواست های HTTP در جاوا اسکریپت یا ایجاد درخواست های HTTP در Node.js با node-رفتن و آوردن!
برای استفاده از Axios در پروژه های Node خود – می توانید به راحتی آن را از طریق نصب کنید npm:
$ npm install axios
# OR
$ yarn add axios
از طرف دیگر، می‌توانید CDN آن را مستقیماً اضافه کنید (یا فایل‌های آن را در دستگاه محلی خود دانلود کنید) و کتابخانه را به صورت زیر در نشانه‌گذاری خود قرار دهید:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
تنظیم کردن تایپ کردن با Axios و HTML
برای ارسال داده های چند بخشی (فایل ها) از طریق داده های فرم – باید نوع رمزگذاری را تنظیم کنید. چند راه وجود دارد که می توانید این کار را انجام دهید، بدون “برنده” مشخص یا متمایز – آنها در نهایت از نظر عملکردی معادل هر درخواست هستند. با Axios – می توانید نوع رمزگذاری جهانی پیش فرض را تنظیم کنید:
axios.defaults.headers.post('Content-Type') = 'multipart/form-data';
این اجرا می کند همه Axios درخواست می کند که از multipart/form-data نوع رمزگذاری از طرف دیگر، می‌توانید نوع هر درخواست را با تغییر دادن تعریف کنید headers:
axios.post("/path/to/api", data, {
headers: {
"Content-Type": "multipart/form-data",
},
});
یا شما فقط می توانید تنظیم کنید enctype ویژگی در <form> برچسب یک فرم خاص، و Axios به سادگی از نوع رمزگذاری آن فرم استفاده می کند:
<form action="/some-endpoint" method="HTTP_METHOD" enctype="multipart/form-data">
</form>
Axios + Express
برای مثال ما یک فرم ساده با دو ورودی ایجاد می کنیم، یکی برای کاربر که نام خود را ارسال کند و دیگری برای انتخاب تصویر نمایه:
<form action="/update-profile" method="post">
<input type="text" name="username" placeholder="Enter name" />
<input type="file" name="userPicture" />
<button type="submit">Submit</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
بدون استفاده از Axios – این اجازه می‌دهد مجموعه پیش‌فرض رویدادها آشکار شود. کلیک کردن روی “ارسال” دکمه یک را ارسال می کند POST درخواست به /update-profile نقطه پایانی سرور ما با این حال – ما می‌توانیم این رفتار پیش‌فرض را با اتصال شنونده رویداد به دکمه لغو کنیم و از رویدادهای پیش‌فرض جلوگیری کنیم!
باز هم، ارسال درخواست‌های Axios مستلزم عدم همزمانی است – و ما می‌توانیم هدر خود را تغییر دهیم و در غیر این صورت درخواست را قبل از ارسال سفارشی کنیم. بیایید یک شنونده رویداد را ضمیمه کنیم، از رفتار پیش‌فرض جلوگیری کنیم و در عوض داده‌های فرم خود را از طریق Axios ارسال کنیم:
<script>
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
axios
.post("http://localhost:5000/update-profile", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
});
</script>
توجه داشته باشید: دوباره، شما می توانید تنظیم کنید enctype از فرم، یا تغییر کرده است headers با Axios. انتخاب به طور کامل است روی شما.
عالی! وقتی فرم پر شد، و “ارسال” بر روی دکمه کلیک می شود – درخواست به آدرس ارسال می شود http://localhost:5000/update-profile نقطه پایانی، با پشتیبانی از آپلود فایل ها. اکنون – اجازه دهید نقطه پایانی را که این درخواست را دریافت کرده و آن را پردازش می کند، تعریف کنیم.
اکسپرس باطن
برای باطن ما – ساده ترین و تمیزترین راه برای چرخاندن یک REST API از طریق Express.js است که با راه اندازی یک سرور و رسیدگی به درخواست ها سروکار دارد – به شما امکان می دهد تمرکز کنید. روی توسعه بجای برپایی.
اگر می‌خواهید درباره ایجاد REST API با Node و Express اطلاعات بیشتری کسب کنید، راهنمای ما برای ایجاد یک REST API با Node و Express را بخوانید!
اکسپرس به خودی خود عالی کار می کند – اما در نظر گرفته شده است که به حداقل برسد و با آن قابل ارتقا باشد میان افزار. میان افزارهای ساده (یا پیچیده) مختلفی را می توان نصب کرد روی بالای آن برای گسترش عملکرد اصلی، در صورت لزوم.
برای استفاده از Express – ما می خواهیم آن را از طریق نصب کنیم npm. برای مدیریت ساده آپلود فایل با Express، می توانیم از آن استفاده کنیم express-fileupload میان افزار که به راحتی از طریق آن نیز نصب می شود npm:
$ npm install express express-fileupload
حالا بیایید یک سرور راه اندازی کنیم و نقطه پایانی را تعریف کنیم که ما را بپذیرد POST درخواست به /update-profile:
// Import the library
const express = require("express");
var fileupload = require("express-fileupload");
// Create app instance
const app = express();
// Register and set up the middleware
app.use(fileupload());
app.use(express.urlencoded({ extended: true }));
// Request handler/endpoint
app.post("/update-profile", (req, res) => {
let username = req.body.username;
let userPicture = req.files.userPicture;
res.send(`
Your username is: ${username}
Uploaded image name is: ${userPicture.name}
`);
});
// Start up the server
app.listen(5000, () => {
console.log("Server started روی port 5000");
});
درخواست (req) ارسال شده به کنترل کننده درخواست حاوی داده های ارسال شده توسط فرم ما است. آن بدن شامل تمام داده های فیلدهایی است که ما تنظیم کرده ایم، مانند username. همه و همه فایل ها در زیر قرار می گیرند files زمینه از req هدف – شی!
بنابراین می توانیم به ورودی دسترسی داشته باشیم
usernameاز طریقreq.body.usernameو فایل آپلود شده از طریقreq.files.userPicture!
وقتی فرم را از طریق HTML خود ارسال می کنیم page، یک درخواست به این API ارسال می شود و ما پاسخ زیر را در مرورگر خود دریافت می کنیم console:
Your username is: NAME_YOU_ENTERRED
Uploaded image name is: UPLOADED_FILE_NAME
علاوه بر این، اگر ما وارد شوید req.files.userPicture خود به console، تمام اطلاعات مربوط به فایل ما مانند نام فایل، نوع رمزگذاری و سایر اطلاعات مربوط به فایل را برمی گرداند.
نتیجه
در این راهنما، نگاهی به آن انداخته ایم enctype ویژگی و روش عملکرد آن را پوشش داد. سپس روش تنظیم را بررسی کردیم enctype با Axios – یک کتابخانه HTTP ناهمزمان محبوب، و ارسال کنید POST درخواست های حاوی داده های چند بخشی/فایل.
در نهایت، یک REST API برای رسیدگی به درخواست و پذیرش فایل ورودی و سایر داده‌های فرم ایجاد کرده‌ایم.
کد منبع موجود است روی GitHub.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-12 21:03:03
