网络图片地址转成file对象

_s七月

已于 2024-07-16 11:06:07 修改

阅读量118

点赞数 2

分类专栏： Vue3 文章标签： javascript 前端开发语言 vue

于 2024-07-16 09:42:41 首次发布

本文链接：https://blog.csdn.net/qq_59572992/article/details/140456883

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

import axios from "axios";

export const imageUrlToFile = async (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;
  }
}

// 组件中调用
import { imageUrlToFile } from '@/utils/tool.js'

const imgUrl = ref('https://lvgunongye.cn/danjuan-api/profile/upload/2024/05/31/142520.png') // 网络图片地址

const publish = () => {
    imgUrl.value = await imageUrlToFile(imgUrl, 'file') // 第二个参数是文件对象名，这样就拿到了file对象格式的数据
}