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

};```
相关推荐
静水leo4 分钟前
使用 Whistle 拦截接口并模拟后端响应
前端
掘金者阿豪16 分钟前
SQL Server数据迁移完成后,凌晨的数据库告警该怎么查?
前端·后端
小郎君65817 分钟前
Vue 多标签页的加载态设计:为什么我没有用 Suspense 实现 PageLoading
vue.js·算法
JudithHuang18 分钟前
React 嵌套路由与布局
前端·react.js·arcgis·react·react router
htzyl20629 分钟前
前端阶梯——第四十三章、实战二:待办清单To-Do
前端·javascript·html
yilaisai35 分钟前
前端开发遇到的一些细节问题整理
vue.js
ManageEngineITSM39 分钟前
工单分类怎么设计?类别、子类别与自动分派的实用方法
大数据·服务器·数据库·人工智能·分类·数据挖掘
CANI_PLUS1 小时前
电脑文件共享
运维·服务器
Linux界最忧郁之人1 小时前
华为云ECS&IMS&AS实战|弹性云服务器、私有镜像、弹性伸缩完整实验
linux·运维·服务器·centos·华为云·openstack