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

};```
相关推荐
HABuo1 分钟前
【linux线程(三)】生产者消费者模型(条件变量阻塞队列版本、信号量环形队列版本)详细剖析
linux·运维·服务器·c语言·c++·ubuntu·centos
运维行者_17 分钟前
使用 Applications Manager 实现 AWS 云监控:保障业务应用高效运行
大数据·运维·服务器·网络·数据库·云计算·aws
安科士andxe26 分钟前
深度解析|安科士100G QSFP28 30km光模块核心技术,破解中长距传输痛点
运维·服务器·网络
Java面试题总结30 分钟前
Linux根分区爆满(占用81%)排查与解决实战
linux·运维·服务器
想要入门的程序猿36 分钟前
VTK与PCL源码编译(Ubuntu 20.04.6)
linux·运维·服务器
程序员小寒39 分钟前
JavaScript设计模式(八):命令模式实现与应用
前端·javascript·设计模式·ecmascript·命令模式
wgod1 小时前
new AbortController()
前端
EmbeddedCore1 小时前
轻量级消息防重模块全解析:从原理到高性能优化
linux·运维·服务器·嵌入式硬件
UXbot1 小时前
UXbot 是什么?一句指令生成完整应用的 AI 工具
前端·ai·交互·个人开发·ai编程·原型模式·ux
发光小北1 小时前
SG-UHF110 系列远距离超高频 RFID 读写器如何应用?
服务器·网络