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

};```
相关推荐
前端 贾公子14 小时前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(中)
前端·html
Never_Satisfied15 小时前
在HTML & CSS中,img标签固定宽度时,img和图片保持比例缩放
前端·css·html
Cache技术分享15 小时前
327. Java Stream API - 实现 joining() 收集器:从简单到进阶
前端·后端
人工智能先锋15 小时前
从零部署你的24小时AI管家:OpenClaw完整实战指南(附踩坑记录)
前端·github
何中应15 小时前
如何在 Linux 系统中设置系统时间
linux·运维·服务器
不是株15 小时前
苍穹外卖(前端)
前端
zheshiyangyang15 小时前
前端面试基础知识整理【Day-6】
前端·面试·职场和发展
星火开发设计15 小时前
关联式容器:set 与 multiset 的有序存储
java·开发语言·前端·c++·算法
未来龙皇小蓝15 小时前
RBAC前端架构-06:使用localstorage及Vuex用户信息存储逻辑
前端·vue.js
BUG集结者15 小时前
【Navigation3】结合ViewModel(二)
前端