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

};```
相关推荐
学吧别真挂了1 分钟前
拒绝卡顿!大学生也能掌握的前端性能优化实战手册
前端·性能优化
diang5 分钟前
Vue3 + Ant Design 实现 Excel 模板导入表格数据
前端·vue.js
doria小鱼5 分钟前
Vue3+Swiper实现PC端横向滑动拖拽
前端·vue.js
李梦晓6 分钟前
@vueuse/motion、motion-v、@motionone/vue三个动画库的区别和联系
前端·vue.js
kovli32 分钟前
红宝书第十一讲:超易懂版「ES6类与继承」零基础教程:用现实例子+图解实现
前端·javascript
eason_fan32 分钟前
解决nvm安装指定版本node失败的方法
前端·node.js
作业逆流成河35 分钟前
🔥🔥🔥 enum-plus:前端福利!介绍一个天花板级的前端枚举库
前端
.R^O^1 小时前
计算机知识
linux·服务器·网络·安全
D哈迪斯1 小时前
vue动态组件实现动态表单的方法
前端·javascript·vue.js
KeyNG_Jykxg1 小时前
🎨Element Plus X 上新! 组件升级🥳
前端·javascript·vue.js