关于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 小时前
Linux基础开发工具(下)
linux·运维·服务器
千寻girling14 小时前
《 Git 详细教程 》
前端·后端·面试
linux修理工15 小时前
chrome官方下载地址
运维·服务器
之歆15 小时前
DAY08_CSS浮动与行内块布局实战指南(下)
前端·css
yqcoder15 小时前
CSS Position 全解析:5 种定位模式详解
前端·css
cn_lyg16 小时前
Linux的入门级常用操作命令
linux·运维·服务器
Rhi63716 小时前
从零搭建项目:React 19 + Vite 8 + Tailwind CSS v4 实战配置
前端
竹林81816 小时前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript
之歆16 小时前
DAY08_CSS浮动与行内块布局实战指南(上)
前端·css
geneculture16 小时前
《智能通信速分多次传输技术(VDMT)》专利文件的全文汉英双语对照版本
服务器·网络·人工智能·融智学的重要应用·哲学与科学统一性·融智时代(杂志)·人机间性