دلیل خطای 404 هنگام آپلود فایل با Page در asp .net core 3.1

پاسخ هوش مصنوعی

خطای 404 در هنگام آپلود فایل در ASP.NET Core معمولاً به دلیل عدم وجود مسیر صحیح به فایل یا کنترلری است که درخواست را پردازش کند. برای حل این مشکل، مراحل زیر را دنبال کنید:

1. **بررسی مسیر آپلود:** اطمینان حاصل کنید که مسیر مشخص شده برای آپلود در CKEditor صحیح است و به درستی تنظیم شده است. مسیر آپلود را می توان در تنظیمات CKEditor به شکل زیر تنظیم کرد:

CKEDITOR.editorConfig = function( config ) {
    config.filebrowserUploadUrl = '/your-controller/upload-image';
};

2. **بررسی تنظیمات Route:** مطمین شوید که Route مربوط به کنترلر آپلود تصویر به درستی تنظیم شده است:

[HttpPost]
public async Task UploadImage(IFormFile file) {
    // منطق آپلود
}

3. **تنظیمات wwwroot:** بررسی کنید که فولدر ‘files’ در دایرکتوری wwwroot ایجاد شده باشد و دسترسی های لازم برای خواندن و نوشتن به آن داده شده باشد.

4. **سرور و مجوزها:** از مجوزهای سرور اطمینان حاصل کنید. ممکن است سرور مجوز آپلود فایل ها را ممنوع کرده باشد.

5. **بررسی لاگ ها:** لاگ های ASP.NET Core را بررسی کنید تا اطلاعات دقیقتری از خطا را بیابید. این اطلاعات می تواند به شناسایی مشکل کمک کند.

شما باید کدهای سی شارپ خودتون رو هم که برای آپلود فایل نوشتید قرار بدید. اما در کل پیشنهاد میکنم برای استفاده از ادیتور با قابلیت آپلود عکس از پیج ها استفاده نکنید. البته با استفاده از Page هم میشه این کار رو انجام داد ولی روشهای ساده تری هم وجود داره. خود CkEditor قابلیت آپلود عکس رو داره.

لینکهای زیر در مورد آپلود عکس در CkEditor هست.

کار با CkEditor با قابلیت آپلود عکس

آپلود فايل در Asp.net core چگونه است؟

بهتره که برای آپلود عکس از Page ها استفاده نکنید. قابلیت آپلود تصویر در CkEditor قبلا یک قابلیت غیررایگان بود و باید این ویژگی خزیداری می شد به همین خاطر در برخی از آموزش ها روش های دیگه ای مثل Page ها استفاده می شد. اما اخیرا CkEditor این قابلیت رو به صورت رایگان عرضه کرده و بهتر هست شما هم از همین قابلیت استفاده کنید.

آپلود تصویر در CkEditor

• ابتدا آخرین نسخه CkEditor رو که قابلیت آپلود تصویر هم داره دانلود کنید یا اگر این نسخه رو دارید از همون میتونید استفاده کنید. (در لینکی که معرفی شده تمامی توضیحات جهت کار با این قابلیت هم وجود داره)
• در روت سایت فایل CkEditor رو کپی کنید. به عنوان مثال ما در Asp.net Core در پوشه wwwroot قرار می دهیم. (می توانید در wwwroot در پوشه ای جداگانه و به دلخواه این کار را انجام بدید.)

• در پوشه ckEditor یک فایل به نام config.js وجود داره که تنظیمات مربوط به ادیتور در این پوشه وجود داره. در اینجا باید تعیین کنیم که به چه صورتی آپلود عکس انجام میشه. خب دستور زیر رو مینویسیم در این فایل:

CKEDITOR.editorConfig = function (config) {
    config.language = 'fa';
    CKEDITOR.config.allowedContent = true;
    config.filebrowserImageUploadUrl = '/file-upload';
}

• در کدها اگر نگاه کنید مقدار filebrowserImageUploadUrl را برابر با /file-upload قرار دادیم. یعنی باید یک متد به نام file-upload داشته باشیم که عملیات آپلود رو برای ما انجام بده. این متد رو بهتره در کنترلر Home پروژه ایجاد کنید. در ادامه این متد رو می نویسیم. البته قبل از اون در View هم برای استفاده از CkEditor از کدهای زیر میتونید استفاده کنید:

<div class="form-group col-xs-12">
       <script src="~/ckeditor/ckeditor.js"></script>
        <label>
          متن سوال
         </label>
         <div>
             <textarea id="questionContent" class="text-editor"></textarea>
         </div>
         <script>
              CKEDITOR.replace('questionContent');
         </script>
</div>

و اما کدهایی که باید در کنترلر نوشته بشه :

public class HomeController : Controller{

private readonly IHostingEnvironment _env;
public HomeController(IHostingEnvironment env)
{
    _env = env;
}


[HttpPost]
[Route("file-upload")]
public IActionResult UploadImage(IFormFile upload)
        {
            var fileName = Path.GetExtension(upload.FileName).ToLower();
            var path = Path.Combine(
                _env.WebRootPath, "qimages",
                fileName);
            using (var stream = new FileStream(path, FileMode.Create))
            {
                upload.CopyTo(stream);
            }
            var url = $"{"/qimages/"}{fileName}";
            return Json(new { uploaded = true, url });
        }
}

دقت کنید که تصاویری که آپلود میشه باید در یک مسیری ذخیره بشن. در این مثال ما در wwwroot یک پوشه به نام qimages ایجاد کردیم و در این مسیر تصاویر رو ذخیره می کنیم.

خب حالا وقتی پروژه رو اجرا می کنید و روی دکمه آپلود عکس در ادیتور کلیک می کنید به راحتی میتونید تصویر رو آپلود کنید.

و در نهایت از طریق فرم زیر میتونید آپلود تصویر رو انجام بدید.