آپلود فایل از سمت کلاینت به سرور، یک تسک عادی است. تقریبا همه دولپر ها آنرا انجام دادند. پست کردن فایل با استفاده از نوع درخواست form data یک راه حل عادی است. ولی اگه بخواهیم یک عکس رو قبل از آپلود به سرور به کاربر نمایش بدیم باید چکار کنیم؟ یک باکس برای نمایش تصویر داریم و می‌خواهیم کاربر قبل از ذخیره و ارسال فایل به سرور بتواند تصویر انتخابی خودش را در آن ببیند.
من یک راه حل بر مبنای base64 پیدا کردم. بدینصورت که تصویر رو به base64 تبدیل کنم و سپس آنرا در یک متغیر ذخیره کنم و این متغیر را به باکس تصویر وصل کنم. البته میتوانیم مقدار base64 را هم به سرور ارسال کنیم و آنجا آنرا به فرمت باینری تبدیل و ذخیره کنیم!
در VueJS، من از watch برای مانیتور کردن تغییرات روی فیلد انتخاب فایل استفاده میکنم تا بعد از تغییر از طرف کاربر، در اپ کلاینت، تصویر را به base64 تبدیل و در یک متغیر دیگر که به باکس تصویر وصل است، ذخیره میکنم.
اجازه بدهید آنها را در کد بررسی کنیم. در قدم اول من دو متغیر تعریف میکنم:
- image: متصل شده به فیلد انتخاب فایل
- base64: برای نگهداری نتیجه تبدیل
image: function (newVal, oldVal) {
if(newVal) {
this.createBase64Image(newVal);
} else {
this.base64 = null;
}
}
createBase64Image: function(FileObject) {
const reader = new FileReader();
reader.onload = (event) => {
this.base64 = event.target.result;
}
reader.readAsDataURL(FileObject);
}
