|
|
★ 背景说明
- 在浏览器环境中，由于安全性限制，不能直接将网络图片地址转换成 File 对象。File 对象是用户在客户端上传文件时才能创建的，而不能由前端代码直接将网络图片地址转换成 File 对象。
- 如果你想要将网络图片地址转换成 Fie 对象，你需要先将图片下载到客户端，然后再将其转换为 File 对象。这可以通过以下步骤完成:
- 1. 使用 Axios(或其他网络请求库)下载图片数据。
- 2. 将下载的数据转换成 Blob 对象。
- 3. 创建一个新的 File 对象，将 Blob 对象放入其中。
- // 将网络图片地址转换为File对象
- async function imageUrlToFile(url, fileName) {
- try {
- // 第一步：使用axios获取网络图片数据
- const response = await axios.get(url, { responseType: 'arraybuffer' })
- const imageData = response.data
- // 第二步：将图片数据转换为Blob对象
- const blob = new Blob([imageData], {
- type: response.headers['content-type']
- })
- // 第三步：创建一个新的File对象
- const file = new File([blob], fileName, { type: blob.type })
- return file
- } catch (error) {
- console.error('将图片转换为File对象时发生错误:', error)
- throw error
- }
- }
- <!doctype html>
- <html>
- <head>
- <title>网络图片地址转换为File对象</title>
- </head>
- <body>
- </body>
- </html>
- File {name: 'girl', lastModified: 1719682659397, lastModifiedDate: Sun Jun 30 2024 01:37:39 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 185786, …}
- blob:http://localhost:63342/27225c8a-56f2-45a6-9c7d-54468d9b8758'
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！ |
|
