base64图片转file的处理

注意：后端返回的base64图片，有的没有code，可能会遭遇响应拦截器拦截，要去主动解除限制

request.js中

//数据处理错误接口}else if(res.code == 400){message({message: res.msg || '请求出错，请重试',type: 'error',duration: 1500        })return Promise.reject(new Error(res.msg || 'Error'))}else if (res.code !== 200) {//下载文件由于没有code所以可以直接通过if(url.indexOf('/excel')){return response}

1、第一种，base64图片先转成blob对象，然后将对象转为file

(1)从接口获取base64图片

// 获取下载文件链接
export function getDownloadUrl(type, fileName) {return request({url: `/api/file/Download/${type}/${fileName}`, //换成自己的接口method: 'get'})
}

(2)将base64转为blob对象

//base64转成blob export function dataURLtoFile(dataURI) {let binary = atob(dataURI.split(",")[1]);let array = [];for (let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], { type: 'image/png'});
}

(3)将blob对象转成file文件

//将blob转为file
export function uploadImg(fileData) {let formData = new FormData();let fileOfBlob = new File([fileData], new Date() + ".png"); // 命名图片名formData.append("file", fileOfBlob);return formData
}

2、直接将base64转为文件

//base64图片转成文件流格式
export function base64ToFile(data, fileName) {const dataArr = data.split(",");const byteString = atob(dataArr[1]);const options = {type: "image/jpeg",endings: "native"};const u8Arr = new Uint8Array(byteString.length);for (let i = 0; i < byteString.length; i++) {u8Arr[i] = byteString.charCodeAt(i);}let formData = new FormData();let fileOfBlob = new File([u8Arr], fileName + ".jpg", options);//返回文件流formData.append("file", fileOfBlob);return formData
}

3、如果文件需要上传(以file格式)，则需要配置上传函数upload，注意headers要转码

//上㤔 图片
export function uploadFile({type,data}){return request({"url":`${define.uploadUrl}/${type}`,"method":"POST",    data,headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}})
}

4、使用时

import {base64ToFile,uploadFile} from "@/api/common.js";let data = base64ToFile(img,this.selectObj.id+"sign");
uploadFile({"type":"signImg","data":data
}).then(resp=>{})

base64图片转file的处理相关推荐

base64图片转换file,并上传到阿里云
第一步:创建base64util package com.yuantu.util; import org.springframework.util.Base64Utils;/*** @author A ...
java将base64图片转为file上传到服务器
首先后台先创建工具类 package org.adv.fw.modular.util;import java.io.ByteArrayInputStream; import java.io.File; ...
前端将base64图片转换成file文件
1.base64转成file具体代码 // base64图片转file的方法(base64图片, 设置生成file的文件名)function base64ToFile(base64, fileName ...
vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
img图片的预览和下载（iframe基本使用），图片转file格式，file文件转base64格式，base64的编码和解码
目录一.根据后端接口返回的URL下载和预览图片 1.调用下载图片函数实现下载图片 2.弹出另一个页面,实现预览图片. 3.不弹出另一个页面,实现下载/预览图片(iframe方式) 4.动态创建ifr ...
在PHP里使用 ImageMagick 生成 base64 图片
个人博客 duanruilong.github.io/blog/ 本文原地址duanruilong.github.io/blog/2018/0- 最近的PHP项目中,需要用到画图和图片拼接效果,这里是 ...
java image to base64_Java实现base64图片编码数据转换为本地图片的方法
本文实例讲述了Java实现base64图片编码数据转换为本地图片的方法.分享给大家供大家参考,具体如下: 项目中用到的把base64图片数据转为本地图片的函数 /** * 替换html中的base64 ...
java后台保存base64图片数据
java后台保存base64图片数据使用byte[] bytes = new BASE64Decoder().decodeBuffer(str);需要引入sun.misc.BASE64Decoder ...
java 微信开发图片发送,微信开发?Java上传Base64图片
class="java">import org.apache.commons.codec.binary.Base64; import org.apache.log4j.Log ...

base64图片转file的处理

base64图片转file的处理相关推荐

最新文章

热门文章