如何在Javascript中将非本地图片URL转换为File对象？

Hey there! Let's fix that issue you're having with turning a remote image URL into a File object.

First, let's break down why your original code failed: the File constructor expects its first parameter to be a sequence of binary data (like a Blob, ArrayBuffer, or Uint8Array), not a plain string URL. That's exactly why you got the error Failed to construct 'File': The provided value cannot be converted to a sequence.

Here's the correct, step-by-step approach to make this work:

Solution Code #

We need to fetch the image's binary data first, convert it to a Blob, then wrap that Blob into a File object (since File is just a specialized Blob with extra metadata like filename).

async function urlToFile(url, filename, mimeType) {
  try {
    // Fetch the remote image resource
    const response = await fetch(url);
    
    // Make sure the request succeeded
    if (!response.ok) {
      throw new Error(`Request failed with status: ${response.status}`);
    }
    
    // Convert the response to a Blob (binary data container)
    const blob = await response.blob();
    
    // Create and return the File object from the Blob
    return new File([blob], filename, { type: mimeType });
  } catch (error) {
    console.error('Error converting URL to File:', error);
    throw error; // Let the caller handle the error if needed
  }
}

// Example usage
urlToFile(
  'https://ps.w.org/wp-mail-smtp/assets/banner-772x250.png?rev=1785565',
  'wp-mail-smtp-banner.png',
  'image/png'
)
.then(file => {
  console.log('Successfully created File object:', file);
  // Use the File object here (e.g., upload to a server, process it, etc.)
})
.catch(err => {
  console.error('Failed to convert URL:', err);
});

Key Notes #

• CORS Restrictions: If the image's server doesn't allow cross-origin requests (no CORS headers set), the fetch will fail. In that case, you'll need to use a backend proxy to fetch the image for your frontend.
• Async Operations: The function uses async/await because fetching and converting the image are asynchronous tasks. Make sure to call it inside an async function or use .then() like the example shows.
• Blob vs File: A File object is essentially a Blob with added metadata (like filename), so converting to Blob first is the critical intermediate step.

内容的提问来源于stack exchange，提问作者KitKit