Как разрешить ответ 415 при отправке многочастного файла на бэкэнд Spring Boot с помощью интерфейса React ⇐ JAVA

[Anonymous]

Я использую интерфейс React с бэкэндом Spring Boot и Axios. Я пытаюсь отправить изображение в виде файла Multipart, используя axios. Вот моя функция для отправки файла в моем компоненте React:

Код: Выделить всё

const [selectedImage, setSelectedImage] = useState(null);

function handleSubmit(){
axios.defaults.withCredentials = true;
axios.post('http://localhost:8080/api/image/',
selectedImage)
.then(response => {
if(response.status === 200){
console.log(response.data)
// window.location.href = "/user-dash"
} else
console.log("nope")
return Promise.reject("it broke")
})
.catch(error => console.error(error));
}

Вот часть .jsx, которая собирает данные изображения

Код: Выделить всё

Upload and Display Image

{selectedImage && (

[img]{URL.createObjectURL(selectedImage)}

 handleSubmit()}>Save
 setSelectedImage(null)}>Remove

)}
 {
console.log(event.target.files[0]);
setSelectedImage(event.target.files[0]);
}}
/>

Console.log выводит файл, как я и ожидал. Затем его получает следующий контроллер:

Код: Выделить всё

@PostMapping(value = "/", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public ResponseEntity uploadImage(@RequestParam(value = "myImage") MultipartFile file){
String response = imageDataService.uploadImage(file);

return ResponseEntity.status(HttpStatus.OK)
.body(response);
}

Затем он отправляется в ImageDataService, который выглядит следующим образом (обратите внимание, я использую Lombok):

Код: Выделить всё

@Service
@AllArgsConstructor
public class ImageDataService {

private ImageDataRepository imageDataRepository;

public String uploadImage(MultipartFile file) {

try {
imageDataRepository.save(ImageData.builder()
.name(file.getOriginalFilename())
.type(file.getContentType())
.imageData(ImageUtil.compressImage(file.getBytes())).build());
} catch (IOException e) {
throw new RuntimeException(e);
}

return "Image uploaded successfully: " +
file.getOriginalFilename();

}

@Transactional
public ImageData getInfoByImageByName(String name) {
Optional dbImage = imageDataRepository.findByName(name);

return ImageData.builder()
.name(dbImage.get().getName())
.type(dbImage.get().getType())
.imageData(ImageUtil.decompressImage(dbImage.get().getImageData())).build();

}

@Transactional
public byte[] getImage(String name) {
Optional dbImage = imageDataRepository.findByName(name);
byte[] image = ImageUtil.decompressImage(dbImage.get().getImageData());
return image;
}

}

Наконец, ImageDataRepository получает его и должен сохранить объект ImageData в таблице. во-первых, репозиторий:

Код: Выделить всё

public interface ImageDataRepository extends JpaRepository {
Optional findByName(String name);
}

а вот класс ImageData:

Код: Выделить всё

@Entity
@Table(name = "imageData")
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class ImageData {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

private String name;

private String type;

@Lob
@Column(name = "imagedata", length = 1000)
private byte[] imageData;
}

Я проверил базу данных и обнаружил, что в таблице image_data нет новой строки. Я не получаю трассировку стека на сервере, но получаю код ответа 415. Это наводит на мысль, что Content-Type установлен неправильно, но когда я указываю Content-type: "multipart/form-data", я получаю сообщение об ошибке, сообщающее, что "запрос был отклонен". потому что не было найдено многочастной границы». В поисках решения этой проблемы я нашел решение, в котором говорилось, что нужно удалить тип контента и граница будет генерироваться автоматически. Это больше не вызывало проблемы с границами, но создавало проблему 415. Затем я попытался добавить границу к заголовку Content-Type следующим образом:

Код: Выделить всё

axios.post('http://localhost:8080/api/image/',
selectedImage,{
headers:{
"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryyEmKNDsBKjB7QEqu"
}
})
.then(response => {
if(response.status === 200){
console.log(response.data)
// window.location.href = "/user-dash"
} else
console.log("nope")
return Promise.reject("it broke")
})
.catch(error => console.error(error));

Это также не привело к созданию трассировки стека на сервере, но я получил ошибку 400 в консоли, и никакие данные не были сохранены в таблице image_data.Я не уверен, что делать дальше, поскольку все решения, которые мне удалось найти, теперь создают цикл ошибок. Одно решение ведет к другой проблеме, решение которой в конечном итоге возвращает к исходной проблеме. Буду очень признателен за любые советы и, конечно же, буду рад предоставить любую информацию, которую я, возможно, упустил. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/781 ... g-boot-bac