关于Vue本地图片转file传到后端服务器(不通过组件上传)

一、代码

javascript 复制代码
// 核心代码
const getMyFileFromLocalPath = (localPath, filename) => {
  return fetch(localPath)
    .then((response) => response.blob())
    .then((blob) => new File([blob], filename, { type: "image/png" })); // 假设是PNG格式

//  获取真正的流文件
const getMyImgFile = (url, name) => {
  getMyFileFromLocalPath(url, name)
    .then((file) => {
    // fileRes: 存储file流文件
      fileRes.value = file;
    })
    .catch((error) => console.error(error));
};

// 动态引入图片,替代require方法
requireImg(url) {
  return new URL(`./src/assets/${url}`, import.meta.url).href
}

// 调用 
 getMyImgFile (
    requireImg('imgae/home/warn.png'),
    '随便起个名字'
  );

};```
相关推荐
雪芽蓝域zzs几秒前
Webstorm打开uniapp uvue文件报红处理方案
vue.js
广州华水科技7 分钟前
北斗形变监测传感器在大坝安全监测中的应用与优势分析
前端
孔令飞14 分钟前
如何学习Go
前端
HUIBUR科技18 分钟前
AI 中枢,面向企业场景构建的 AI 智能体
前端·数据库·人工智能
Allstar_4330 分钟前
拆解全星APQP系统的六大核心质量工具如何联动——汽车供应链企业专业级研发项目管理系统
运维·服务器
随便写个软件35 分钟前
【新版本】EasyExplorer资源管理器 3.12.0——地址栏重要更新
运维·服务器·前端·everything·资源管理器
Jack N38 分钟前
【Strapi 系列之二】Collection / Single / Component 怎么选?Strapi 字段大全一篇讲透
前端·javascript·strapi
虚无的纽扣43 分钟前
【Linux】揭开文件系统神秘的面纱:第四讲:可执行文件的组装车间
linux·运维·服务器
hiahiahia1231 小时前
Agent Tool 执行失败怎么办
服务器·前端
Java后端的Ai之路1 小时前
09-React组件生命周期
前端·react.js·前端框架