Как загрузить картинку с фронтенда на сервер, используя ReactJS и ASP .NET Web api?

Имеется код на для загрузки картинки на asp web .api

public async Task&lt;PluginModel&gt; CreatePlugin(PluginModelDtO model)         {              var newPlugin = new PluginModel()             {                 Title = model.Title,                 TitleKZ = model.TitleKZ,                 TitleENG = model.TitleENG,                 ShortInfo = model.ShortInfo,                 ShortInfoKZ = model.ShortInfoKZ,                 NameFile = UploadFile(model.ImageFile),                 ShortInfoENG = model.ShortInfoENG,                         };             await context.pluginModelModels.AddAsync(newPlugin);             await context.SaveChangesAsync();             return newPlugin;         }  public string UploadFile(IFormFile model)         {             if (model.Length &gt; 0)             {                 try                 {                     if (!Directory.Exists(environment.WebRootPath + "\Images\"))                     {                         Directory.CreateDirectory(environment.WebRootPath + "\Images\");                     }                      using (FileStream fileStream = System.IO.File.Create(environment.WebRootPath + "\Images\" +                                     model.FileName))                     {                         model.CopyTo(fileStream);                         fileStream.Flush();                         return httpContext.HttpContext.Request.Host.Value.ToString() + "\Images\" + model.FileName;                     }                 }                 catch (Exception ex)                 {                      return ex.ToString();                 }             }             else             {                 throw new Exception("Upload Files");             }         }

1

public async Task<PluginModel> CreatePlugin(PluginModelDtO model) { var newPlugin = new PluginModel() { Title = model.Title, TitleKZ = model.TitleKZ, TitleENG = model.TitleENG, ShortInfo = model.ShortInfo, ShortInfoKZ = model.ShortInfoKZ, NameFile = UploadFile(model.ImageFile), ShortInfoENG = model.ShortInfoENG, }; await context.pluginModelModels.AddAsync(newPlugin); await context.SaveChangesAsync(); return newPlugin; } public string UploadFile(IFormFile model) { if (model.Length > 0) { try { if (!Directory.Exists(environment.WebRootPath + "\Images\")) { Directory.CreateDirectory(environment.WebRootPath + "\Images\"); } using (FileStream fileStream = System.IO.File.Create(environment.WebRootPath + "\Images\" + model.FileName)) { model.CopyTo(fileStream); fileStream.Flush(); return httpContext.HttpContext.Request.Host.Value.ToString() + "\Images\" + model.FileName; } } catch (Exception ex) { return ex.ToString(); } } else { throw new Exception("Upload Files"); } }

Ответ от сервера таков:

Также имеется код с фронтенда (Реакт) для картинки на сервер:
Но он мне выдает ошибку: каким образом прописать на фронте код правильно, чтоб загрузился пост с картинкой?

const createNewPlugin = async (e) =&gt; {     e.preventDefault();      const formData = new FormData();     formData.append('title', titlePlugin);     formData.append('titleKZ', titlePluginKZ);     formData.append('titleENG', titlePluginENG);     formData.append('shortInfo', shortInfoPlugin);     formData.append('shortInfoKZ', shortInfoPluginKZ);     formData.append('shortInfoENG', shortInfoPluginENG);     formData.append('imageFile', selectedFile);     formData.append('nameFile', nameFile);     // const newPlugin = {     //   title: titlePlugin,     //   titleKZ: titlePluginKZ,     //   titleENG: titlePluginENG,     //   shortInfo: shortInfoPlugin,     //   shortInfoKZ: shortInfoPluginKZ,     //   shortInfoENG: shortInfoPluginENG,     //   nameFile: nameFile,     // };      const url = 'https://localhost:7183/createPlugin';      await fetch(url, {       method: 'POST',       headers: {         'Content-Type': 'application/json',         'Content-Type': 'multipart/form-data;',       },       body: formData,     })       .then((response) =&gt; response.json())       .then((result) =&gt; console.log(result));      navigate('/plugins');   }; return (     &lt;div className="container"&gt;       &lt;Form onSubmit={createNewPlugin} style={{ marginTop: 100 }}&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlInput1"&gt;           &lt;Form.Label&gt;Название плагина&lt;/Form.Label&gt;           &lt;Form.Control             type="file"             placeholder="Загрузите картинку"             readOnly             onChange={handleChangeImg}             accept="image/*, .png, .jpg, .gif, .web"           /&gt;         &lt;/Form.Group&gt;         &lt;hr /&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlInput1"&gt;           &lt;Form.Label&gt;Название плагина&lt;/Form.Label&gt;           &lt;Form.Control             type="text"             placeholder="название плагина..."             value={titlePlugin}             onChange={(e) =&gt; setTitlePlugin(e.target.value)}           /&gt;         &lt;/Form.Group&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlInput1"&gt;           &lt;Form.Label&gt;Название плагина(КАЗАХСКИЙ)&lt;/Form.Label&gt;           &lt;Form.Control             type="text"             placeholder="название плагина...((казахский)"             value={titlePluginKZ}             onChange={(e) =&gt; setTitlePluginKZ(e.target.value)}           /&gt;         &lt;/Form.Group&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlInput1"&gt;           &lt;Form.Label&gt;Название плагина(АНГЛИЙСКИЙ)&lt;/Form.Label&gt;           &lt;Form.Control             type="text"             placeholder="название плагина...(английский)"             value={titlePluginENG}             onChange={(e) =&gt; setTitlePluginENG(e.target.value)}           /&gt;           &lt;hr /&gt;         &lt;/Form.Group&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"&gt;           &lt;Form.Label&gt;Короткая информация&lt;/Form.Label&gt;           &lt;Form.Control             as="textarea"             rows={3}             value={shortInfoPlugin}             onChange={(e) =&gt; setShortInfoPlugin(e.target.value)}           /&gt;         &lt;/Form.Group&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"&gt;           &lt;Form.Label&gt;Короткая информация(КАЗАХСКИЙ)&lt;/Form.Label&gt;           &lt;Form.Control             as="textarea"             rows={3}             value={shortInfoPluginKZ}             onChange={(e) =&gt; setShortInfoPluginKZ(e.target.value)}           /&gt;         &lt;/Form.Group&gt;         &lt;Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"&gt;           &lt;Form.Label&gt;Короткая информация(АНГЛИЙСКИЙ)&lt;/Form.Label&gt;           &lt;Form.Control             as="textarea"             rows={3}             value={shortInfoPluginENG}             onChange={(e) =&gt; setShortInfoPluginENG(e.target.value)}           /&gt;         &lt;/Form.Group&gt;         &lt;Button type="submit" variant="success"&gt;           Создать         &lt;/Button&gt;{' '}         &lt;Button onClick={() =&gt; navigate('/plugins')} variant="secondary"&gt;           Отменить         &lt;/Button&gt;{' '}       &lt;/Form&gt;     &lt;/div&gt;   );

1

Ошибка:

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

Ответы:

https://github.com/vkorotenko/VueRecaptcha/blob/ma...

var imagefile = document.getElementById("upload_files") as HTMLInputElement;     if (imagefile == null) return;     if (imagefile.files == null) return;     const files = imagefile.files;     for (let i = 0; i &lt; files.length; i++) {       formData.append("files", files[i]);     }

1	var imagefile = document.getElementById("upload_files") as HTMLInputElement; if (imagefile == null) return; if (imagefile.files == null) return; const files = imagefile.files; for (let i = 0; i < files.length; i++) { formData.append("files", files[i]); }

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
07.04.2024

Ответить

Для загрузки изображения с фронтенда на сервер, используя ReactJS и ASP .NET Web API, вам понадобится выполнить несколько шагов.

Шаг 1: Настройка ReactJS
Сначала вам нужно создать форму для загрузки изображения на фронтенде с помощью ReactJS. Вы можете использовать элемент для выбора файла. При выборе файла пользователем, вы должны сохранить файл в состоянии компонента или использовать библиотеку для работы с файлами, например react-dropzone.

Шаг 2: Отправка изображения на сервер
После того как пользователь выбрал изображение, вам нужно отправить его на сервер. Для этого вы можете использовать библиотеку axios или fetch. Создайте POST запрос к вашему ASP .NET Web API endpoint, который будет обрабатывать загрузку изображения.

Пример запроса с использованием axios:

const formData = new FormData();
formData.append('image', selectedFile);

axios.post('http://your-api-endpoint/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

1

2

3

4

5

6

7

8

9

10

11

12

const formData = new FormData();

formData.append('image', selectedFile);

axios.post('http://your-api-endpoint/upload', formData, {

headers: {

'Content-Type': 'multipart/form-data'

}

}).then(response => {

console.log(response.data);

}).catch(error => {

console.error(error);

});

Шаг 3: Обработка загрузки на сервере
На стороне сервера вам нужно написать обработчик для загрузки изображения. В ASP .NET Web API вы можете использовать контроллер и метод, который будет принимать файл и сохранять его на сервере.

Пример контроллера в ASP .NET Web API:

[HttpPost]
public IHttpActionResult UploadImage()
{
    var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files[0] : null;
    
    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(HttpContext.Current.Server.MapPath("~/uploads"), fileName);
        file.SaveAs(path);
        
        return Ok("Image uploaded successfully");
    }
    
    return BadRequest("No image uploaded");
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

[HttpPost]

public IHttpActionResult UploadImage()

{

var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files[0] : null;

if (file != null && file.ContentLength > 0)

{

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(HttpContext.Current.Server.MapPath("~/uploads"), fileName);

file.SaveAs(path);

return Ok("Image uploaded successfully");

}

return BadRequest("No image uploaded");

}

Шаг 4: Обработка ответа
После того как изображение успешно загружено на сервер, вы можете получить ответ от сервера и обработать его на фронтенде. В случае успешной загрузки, вы можете показать пользователю уведомление об успешной загрузке.

Это основные шаги, которые вам нужно выполнить для загрузки изображения с фронтенда на сервер, используя ReactJS и ASP .NET Web API. Не забудьте добавить проверки на стороне сервера для обработки ошибок и безопасности загружаемых файлов.

Как загрузить картинку с фронтенда на сервер, используя ReactJS и ASP .NET Web api?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как загрузить картинку с фронтенда на сервер, используя ReactJS и ASP .NET Web api?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно