注意:后端返回的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=>{
    
})

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐