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

};```
相关推荐
We་ct4 分钟前
React Render 与 Commit 阶段详解
前端·react.js·面试·前端框架·react·commit·render
英俊潇洒美少年5 分钟前
React Hook 钩子 useInsertionEffect、useLayoutEffect、useEffect的区别
前端·javascript·react.js
坚持学习前端日记7 分钟前
Agent AI 后端接口对接与大模型适配指南
前端·人工智能·python·ios
tritone8 分钟前
最近在学习网络配置中的Port Forwarding(端口转发)技术,为了有个稳定的实验环境,我试用了阿贝云的免费虚拟主机和免费云服务器
服务器·网络·学习
坚持学习前端日记10 分钟前
Agent AI 多模态交互与全场景架构设计
前端·javascript·人工智能·visual studio
王家视频教程图书馆12 分钟前
vue3移动端组件库清单
前端
毕设源码-郭学长13 分钟前
【开题答辩全过程】以 基于web的车辆检测管理系统的设计与实现为例,包含答辩的问题和答案
前端
cuijiecheng201817 分钟前
Linux下CPP-DateTime-library库的使用
linux·运维·服务器
向上的车轮19 分钟前
TypeScript 一日速通指南:以订单管理系统实战为核心
前端·javascript·typescript
yqzyy22 分钟前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx