react,javascript Image Url to File

Hmm... Về cách để Convert một URL sang File hoặc Blob thì a sẽ chia sẻ bên dưới. Nhưng trước tiên cần clear một chút, theo anh hiểu thì em đang ở vị trí FE, và code React. Em edit một sản phẩm đã có ảnh sẵn rồi, và muốn cập nhật ảnh khác cho cái sản phẩm đó. - Trong trường hợp cập nhật ảnh khác bị lỗi, nếu nhìn từ góc độ FE thì lúc em gửi file ảnh đó lên, em đã có cái file ảnh lỗi đó dạng File hoặc Blob rồi mà, em cũng có thể xử lý phần request gửi file ảnh bị lỗi đó lên server trong phần catch lỗi ở function gọi api update sản phẩm là được => đâu cần phải convert url gì đâu ta? - Tuy nhiên anh đang thấy spec đoạn này hơi sạn, có vấn đề chút, hoặc là do em chưa mô tả kỹ hơn, nên anh cứ nói theo ý hiểu của anh trước đã nhé: - Khi em update ảnh hay nói chung cho tất cả là em muốn gửi file lên server thì đầu tiên em sẽ validate file ảnh cẩn thận ở phía FE React trước, sau đó gọi api để gửi file lên server cho phía BE, việc còn lại là ở phía BE xử lý đẩy ảnh đó lên Cloud rồi lấy url ảnh về, nếu như không update được url ảnh cho sản phẩm trong Database, mà muốn lưu log file lại để check thì việc này cũng nên do BE làm luôn chứ không cần thiết để FE phải tốn công request thêm một phát nữa làm gì. - Quay trở lại với vụ Convert một URL sang File thì em đang hiểu đúng rồi, em sẽ cần fetch cái file đó về, có response rồi có thể dùng nhiều cách tùy theo trường hợp mà em cần, ví dụ new File([response.blob]) hoặc dùng FileReader với readAsDataURL của cái response đó. Anh ví dụ một đoạn code, cũng như có để luôn một cái link Stackoverflow về phần này bên dưới, em có thể tham khảo thêm những cách làm trong link này nhé: - https://stackoverflow.com/a/41752161/8324172

1async function getFileFromUrl(url, name, defaultType = 'image/jpeg'){
2  const response = await fetch(url)
3  const data = await response.blob()
4  return new File([data], name, {
5    type: data.type || defaultType
6  })
7}
8// Lưu ý await ở đây anh để ví dụ, còn lúc gọi thì nhớ await phải nằm trong scope của async nhé:
9const file = await getFileFromUrl('https://example.com/image.jpg', 'example.jpg')