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

};```
相关推荐
静西子16 分钟前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果18 分钟前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv21 分钟前
10月25日
前端·javascript·vue.js
xuelong-ming25 分钟前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
华普微HOPERF2 小时前
Matter协议,如何塑造更宜居、流畅的智能家居网络?
服务器·网络·智能家居
万邦科技Lafite2 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
小志biubiu3 小时前
【Linux】Ext系列文件系统
linux·服务器·c语言·经验分享·笔记·ubuntu·操作系统
DooTask官方号4 小时前
DooTask 1.3.38 版本更新:MCP 服务器与 AI 工具深度融合,开启任务管理新体验
运维·服务器·人工智能·开源软件·dootask
一只小透明啊啊啊啊5 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友5 小时前
设计模式有哪几类?
前端·后端·设计模式