Member 14769019 Ответов: 2

Я не могу загрузить и сохранить файл с помощью javascript. Как я могу это сделать?


Ребята, я не могу загрузить файл. Я могу отправить значение, например "контент", но когда я пытаюсь отправить изображение, оно не работает.

<form asp-action="Add" asp-controller="Tweet" method="post" enctype="multipart/form-data">
<span><textarea style="background-color:black" placeholder="Neler oluyor?" id="content" asp-for="Content" class="form-control p-0 my-0"></textarea>
<input type="file" id="myFile" name="myFile" /></span>


     document.querySelector("#ekle").addEventListener('click', ekle);
function ekle() {
             var content = $("#content").val();
             var file = document.querySelector("#myFile").files[0];
             let formData = new FormData();
             formData.append("image", file);
             var username = '@User.Identity.Name';
             $.ajax({
                    dataType:'json',
                 url:'/Member/Tweet/Add',
                 data: { "content": content, "image": formData },
                   type: 'POST'


public void Add(TweetDTO model, string userName, string content, IFormFile image)
        {
            var user = _uow.User.Find(x => x.UserName == userName);
            model.Content = content;
            model.UserId = user.Id;
            string uploadDir = Path.Combine(_environment.WebRootPath, "media/tweet");
            if (!Directory.Exists(uploadDir))
            {
                Directory.CreateDirectory(uploadDir);
            }
            string fileName = Path.GetFileName(image.FileName);
            using (FileStream stream = new FileStream(Path.Combine(uploadDir, fileName), FileMode.Create))
            {

                image.CopyTo(stream);
                model.ImagePath = fileName;

            }
            Tweet tweet = _mapper.Map<Tweet>(model);
            _uow.Tweet.Add(tweet);
            _uow.SaveChange();
        }


Что я уже пробовал:

Как я уже сказал, я могу отправить значение "контент", но не могу отправить изображение. Я искал в интернете и пробовал много способов, но все они были одинаковыми.

2 Ответов

Рейтинг:
19

Richard Deeming

То FormData объект должен содержать все данные для отправки.

Вам также нужно будет установить processData и contentType варианты для false, и удалить dataType: 'json' вариант.

И вы должны правильно кодировать имя вашего пользователя, прежде чем испускать его в переменную Javascript. Так как это, по-видимому, так ASP.NET ядро, вы должны быть в состоянии использовать то JsonHelper расширения[^]:

let formData = new FormData();
formData.append("username", @Json.Serialize(User.Identity.Name));

var content = $("#content").val();
formData.append("content", content);

var file = document.querySelector("#myFile").files[0];
formData.append("image", file);

$.ajax({
    url:'/Member/Tweet/Add',
    data: formData
    type: 'POST',
    processData: false,
    contentType: false,
Использование объектов FormData - веб-API | MDN[^]
Отправляя виде FormData с jQuery."Аякс" () | Мэтт Ланн[^]


Member 14769019

Большое вам спасибо! Это работает. вы очень ясно объяснили, спасибо.