关于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'),
    '随便起个名字'
  );

};```
相关推荐
陈随易1 分钟前
RollCode:不只是在做页面,而是在缩短“从需求到上线”的整条链路
前端·后端
炽烈小老头26 分钟前
【每天学习一点算法 2026/03/17】括号生成
前端·学习·typescript
大漠_w3cpluscom30 分钟前
如何在 CSS 中正确使用 if()
前端
eason_fan31 分钟前
踩坑记录:Mac M系列芯片下 pnpm dlx 触发的 esbuild 架构不匹配错误
前端·前端工程化
程序猿大波33 分钟前
基于java,SpringBoot和Vue餐饮公司食堂管理系统设计
java·vue.js·spring boot
艾莉丝努力练剑35 分钟前
【脉脉】AI创作者崛起:掌握核心工具,在AMA互动中共同成长
运维·服务器·c++·人工智能·安全·企业·脉脉
swipe41 分钟前
JavaScript 对象操作进阶:从属性描述符到对象创建模式
前端·javascript·面试
IT_陈寒1 小时前
React开发者都在偷偷用的5个性能优化黑科技,你知道几个?
前端·人工智能·后端
还是大剑师兰特2 小时前
Vue3 前端专属配置(VSCode settings.json + .prettierrc)
前端·vscode·json
前端小趴菜052 小时前
vue3项目优化方案
前端·javascript·vue.js