Abolfazl
1 سال پیش توسط Abolfazl مطرح شد
4 پاسخ

نحوه ارسال تصویر از سرور به کلاینت

سلام
اول از همه لطفا بهم بگید که خودتون موقعی که قصد دارید یه عکس رو از سرور ارسال کنید به کلاینت چه پلنی برای این کار دارید

من یوزرم میاد یک سری اطلاعات وارد میکنه اعمم از
عنوان
توضیح
مبلغ
تصویر

من اینجا بحثم راجب تصویره
و چارت پروژم هم به این شکله

-project
front(vue)
uploadFolder
back(file nodejs)

وقتی یوزر تصویر رو ارسال میکنه توی فولدر upload یه فولدر به نام package درست میشه یه فولدر هم با نام عنوانی که خودش وارد کرد و عکس درون همون فولدر ذخیره میشه و توی دیتابیس توی رکورد مربوطه ادرس ذخیره میشه
خب
یه پیج دارم که میخوام همه ی این یوزر هایی که دیتا وارد کردن خیلی خوشگل نشون داده بشه

من توی اون پیج به سرور ریکوئست میزنم و دیتا هارو میگیرم (عنوان،توضیح،مبلغ،تصویر)
دقت هم کنید پروژم لوکاله هنوز روی هاست آپلود نکردم

مشکل اینجاس که چطوری اون تصویر رو توی کلاینت نشون بدم
وقتی دستی بخوام آدرس رو مثلا توی تگ img وارد کنم که نمیشه چون vue بهم اجازه نمیده وقتی پروژه run dev میشه فقط باید از پوشه
vue
public
این عکسو بگیرم
که این روش نمیشه
چه روش هایی دیگه میمونه دوستان ممنون میشم که بگید

@FullStack
@ossvahid
@Arshiamohammadei
@Raymond
@Farzadameri
@Pouyab
@SZaaaa1111
@oxbir
@hussain2
@magicaldev1


ثبت پرسش جدید
Arshiamohammadei
تخصص : وب و هوش مصنوعی
@Arshiamohammadei 1 سال پیش مطرح شد
1

سلام. برای نمایش تصویر در Vue.js، شما می‌توانید از چند روش استفاده کنید. یکی از روش‌ها استفاده از آدرس عکس می‌باشد. به دلیل اینکه شما تصاویر را در پوشه upload ذخیره می‌کنید، شما باید آدرس تصویر را از سمت سرور به عنوان آدرس عکس در جستجوگر وارد کنید.

  1. استفاده از آدرس مطلق
    شما میتوانید از آدرس مطلق برای نمایش تصویر استفاده کنید. برای این کار، از آدرس http://localhost:3000/upload/package/image.jpg برای نمایش تصویر استفاده کنید.

    <img src="http://localhost:3000/upload/package/image.jpg"/>

  2. استفاده از relative path
    شما می‌توانید از مسیر نسبی برای نمایش تصویر استفاده کنید. برای این کار، باید به فولدر public در پروژه Vue.js خود بروید و داخل آن یک فولدر به نام upload بسازید و تصاویر درون آن قرار دهید. سپس میتوانید از آدرس http://localhost:8080/upload/package/image.jpg برای نمایش تصویر استفاده کنید.

    <img src="/upload/package/image.jpg"/>

  3. استفاده از Base64
    شما می‌توانید تصویر را به شکل Base64 Encode کرده و در صفحه Vue.js خود نمایش دهید. برای این کار، میتوانید از یک پکیج مثل base64-img استفاده کنید. به عنوان مثال:

    const base64Img = require('base64-img');
    const imageUrl = 'http://localhost:3000/upload/package/image.jpg';
    
    let imageBase64 = '';
    base64Img.base64(imageUrl, function(err, data) {
       if (err) {
           console.error(err);
       }
       imageBase64 = data;
    });
    
    <img :src="imageBase64"/>

با استفاده از هرکدام از روش‌های فوق، شما میتوانید تصاویر را در پروژه Vue.js خود نمایش دهید.


میکائیل
تخصص : برنامه نویسی سمت سرور و کلاینت
@FullStack 1 سال پیش آپدیت شد
1

سلام وقت بخیر دوست عزیز
ببینید موقعه آپلود عکس نمیخواد کل مسیر یا ادرس رو تو دیتابیس ذخیره کنید چون امکان داره ادرسی که عکس ها رو توش ذخیره کردین رو بخواید عوض کنید و عکس های توی دیتابیس دیگه ادرس معتبری ندارن فقط موقعه اپلود یک اسم به عکس بدید و اون رو توی دیتابیس ذخیره کنید و عکس رو توی پوشه مورد نظر آپلود کنید و موقعه فراخونیش بیاد url اون پوشه که میخواید عکس لود بشه رو برگردونید و در ادامش اسم اون عکس داخل دیتابیسس رو بهش اضافه کنید مثلا اسمی که توی دیتابیس هست test.jpg هست و شما ادرس عکس هارو بر میگردونید
https://example.com/profile/ این ادرس هست شما میاید و عکس رو به ادامش میچسبونی که میشه
https://example.com/profile/test.jpg عکس رو بر میگردونه برات

عکس ها توی public اگه ذخیره بشه باید ادرس پابلیک رو بدید و اسم پوشه ای که عکس ها توش هست و اسم اون عکس توی دیتابیس
من چون vue کار نکردم دقیقا نمیدونم ولی توی laravel کدش میدم حالا که زمینه بشه بدونی چطور میشه تو vue انجام بدی

<img src="{{ asset("img/$image") }}">

اینجوری حالا $image رو از کنترولر پاس بدی یا توی foreach اگه واکشی کنی توی این عکس نشون میده حالا توی vue ادرس فولدر public رو میگیری و عکسو بهش میدی تمام عکسو نشون میده


Abolfazl
تخصص : Frount-End Web Developer
@abolfazljamshidi101010 1 سال پیش مطرح شد
0

ممنون از جوابتون متوجه شدم
ولی یه مشکلی که دارم الان اینه وقتی
http://localhost:3000/upload/package/toolbo/icon.png
رو مثلا میزنم (یه آدرس معتبر که توی اون عکس هست)
بهم چیزی نمایش داده نمیشه
مشکلش چیه؟


میکائیل
تخصص : برنامه نویسی سمت سرور و کلاینت
@FullStack 1 سال پیش آپدیت شد
1

خوب خودت این ادرس رو باز کن ببین عکسو بهت نشون میده یا نه اگه نشون بده که ادرس درسته و کدت اشتباهه بهش دادی اما اگه باز نکنه یعنی ادرس اشتباه هست اگه مشکل از کدت هست قبل از اینکه عکسو توی img نشون بدی یه پرینت ازش بگیر ببین چه ادرسی رو پرینت میکنه شاید ادرس اشتباهی رو به img میده


Arshiamohammadei
تخصص : وب و هوش مصنوعی
@Arshiamohammadei 1 سال پیش مطرح شد
1

سلام. برای نمایش تصویر در Vue.js، شما می‌توانید از چند روش استفاده کنید. یکی از روش‌ها استفاده از آدرس عکس می‌باشد. به دلیل اینکه شما تصاویر را در پوشه upload ذخیره می‌کنید، شما باید آدرس تصویر را از سمت سرور به عنوان آدرس عکس در جستجوگر وارد کنید.

  1. استفاده از آدرس مطلق
    شما میتوانید از آدرس مطلق برای نمایش تصویر استفاده کنید. برای این کار، از آدرس http://localhost:3000/upload/package/image.jpg برای نمایش تصویر استفاده کنید.

    <img src="http://localhost:3000/upload/package/image.jpg"/>

  2. استفاده از relative path
    شما می‌توانید از مسیر نسبی برای نمایش تصویر استفاده کنید. برای این کار، باید به فولدر public در پروژه Vue.js خود بروید و داخل آن یک فولدر به نام upload بسازید و تصاویر درون آن قرار دهید. سپس میتوانید از آدرس http://localhost:8080/upload/package/image.jpg برای نمایش تصویر استفاده کنید.

    <img src="/upload/package/image.jpg"/>

  3. استفاده از Base64
    شما می‌توانید تصویر را به شکل Base64 Encode کرده و در صفحه Vue.js خود نمایش دهید. برای این کار، میتوانید از یک پکیج مثل base64-img استفاده کنید. به عنوان مثال:

    const base64Img = require('base64-img');
    const imageUrl = 'http://localhost:3000/upload/package/image.jpg';
    
    let imageBase64 = '';
    base64Img.base64(imageUrl, function(err, data) {
       if (err) {
           console.error(err);
       }
       imageBase64 = data;
    });
    
    <img :src="imageBase64"/>

با استفاده از هرکدام از روش‌های فوق، شما میتوانید تصاویر را در پروژه Vue.js خود نمایش دهید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام