vue图片转file文件类型

vue图片转为File文件类型

供参考，欢迎指教

文章目录

vue图片转为File文件类型
- 图片转为base64格式
- base64格式转为File文件类型
- - 使用
- File文件转base64格式
- - 使用
  - 返回格式效果图

步骤：

先把图片路径转为base64格式
再把base64转为File文件

图片转为base64格式

这里把方法定义js文件中，根据需要自行调整

export const imageToBase64 = (img) => {// Vue.prototype.$imageToBase64 = img => { //定义全局var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/jpeg" + ext);return dataURL;
};

base64格式转为File文件类型

export const base64ToFile = (urlData, fileName) => {let arr = urlData.split(',');let mime = arr[0].match(/:(.*?);/)[1];let bytes = atob(arr[1]); // 解码base64let n = bytes.lengthlet ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, { type: mime });
}

使用

引入js文件

import { imageToBase64, base64ToFile } from "@/api/commonApi";created() {//调用方法 【url仅参考】let url = 'https://testwq.jk.net/uploads/20200701/111fa8095def5bd296332f7eac01e400.jpg';this.handleImgToBase64(url, (res) => {// 接收回调结果console.log('回调结果', res);});
},methods: {/*** url: 图片路径* cb: callback*/handleImgToBase64(url, cb) {let that = this;var image = new Image();image.crossOrigin = '';image.src = url;image.onload = function () {let base64 = imageToBase64(image); //图片转base64let file = base64ToFile(base64, 'file'); //base64转File// 根据自身需求调整【因个人项目逻辑不一样，这里使用回调函数】cb && typeof cb == 'function' && cb(file);return file;}},
}

File文件转base64格式

通过FileReader对象读取存储文件内容。

说明：

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容

/**
* file： file文件
*/
base64(file) {return new Promise(function(resolve, reject) {let reader = new FileReader();let imgResult = "";reader.readAsDataURL(file);reader.onload = function() {imgResult = reader.result;};reader.onerror = function(error) {reject(error);};reader.onloadend = function() {resolve(imgResult);};});
}

使用

<input type="file" @change="previewFile">

var file = e.target.files[0];
this.base64(file);

返回格式效果图

vue图片转file文件类型相关推荐

vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...
【前端图片转化】 base64格式转为 File文件类型
下面的函数能将base664格式用于已知bseae64 转File格式上传求点赞!! 关注!! 收藏 !! base64格式的图片不能直接上传到oss图片服务器的,需要转换成file文件流的形式上 ...
【JS实战】base64转换为file文件类型（上传头像为例子）
base64转换为file类型点击头像,选择文件点击选取时,获取base64文件这里使用了Vue-ImgCut插件(后续博客介绍) 代码讲解 function base64toFile(data ...
网络图片转换为文件类型（File）
以下的图片转文件如果涉及跨域的问题,需要服务端支持图片跨域(常见的就是用了OSS存储图片的,需要在控制台开启允许跨域请求) 如果oss控制台已经开了允许跨域依然是偶尔出现报错的话,可以在图片后面带一个 ...
前端将base64图片转换成file文件
1.base64转成file具体代码 // base64图片转file的方法(base64图片, 设置生成file的文件名)function base64ToFile(base64, fileName ...
网络图片转换为文件类型
文章目录普通图片连接转化为文件实现 1.图片链接转base64 1. 利用`canvas`转换 2. 利用ajax转换 3. 利用fetch转换 2.base64转化为文件类型以下的图片转文件如果 ...
.NPT 扩展名格式文件类型及打开方式分析：首次渗入 XR 内容领域
文件扩展名 NPT 有多种文件类型,并且也与多种不同的软件程序相关联.NPT 文件主要归类为 Data Files.Settings Files 类型.AR/VR技术普及以后,NPT 也有了 XR 内 ...
js判断file是否为空_JS - 获取文件后缀，判断文件类型（比如是否为图片格式）...
1,获取文件后缀有时候我们需要通过文件名或者路径,得到该文件的后缀名(扩展名),可以通过如下方式进行截取: //文件路径 var filePath = "file:///storage/e ...
上传file时accept限制文件类型pdf、doc、docx、 jpg、 png、xls 、xlsx等格式
<input type="file" accept="image/*" /> accept表示可以上传文件类型,image表示图片,*表示所有支持的 ...

vue图片转file文件类型

vue图片转为File文件类型

文章目录

图片转为base64格式

base64格式转为File文件类型

使用

File文件转base64格式

使用

返回格式效果图

vue图片转file文件类型相关推荐

最新文章

热门文章