base64和网络链接如何互转?使用axios请求时,如何发送formData请求?

15 篇文章 0 订阅

1、base64和网络链接如何互转?

import { ElMessage } from 'element-plus'
import { uploadByToken } from "@/api/index"

// 将网络图片下载本地成为base64图片-解决画布跨域问题
export const getURLBase64 = (url) => {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.open('get', url, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status === 200) {
        var blob = this.response
        var fileReader = new FileReader()
        fileReader.onloadend = function (e) {
          var result = e.target.result;
          resolve(result)
        };
        fileReader.readAsDataURL(blob)
      }
    };
    xhr.onerror = function () {
      reject()
    };
    xhr.send()
  })
}
// base64链接转网络url短链
export const base642Url = async (base64) => {
  try {
    const arr = base64.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const suffix = mime.split('/')[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    const fileTemp = new File([u8arr], `file.${suffix}`, {
      type: mime
    })
    // 创建formData对象
	const formData= new FormData()
	// 将上传的文件对象转为formData对象;fileData:上传的文件对象
	formData.append('file', fileTemp)
    const res = await uploadByToken(formData)
    return res
  } catch (error) {
    ElMessage.error(error.message || '链接转换失败')
    return base64
  }
};

2、使用axios请求时,如何发送formData请求?

// 创建formData对象
const formData= new FormData()
// 将上传的文件对象转为formData对象
// fileData:上传的文件对象
formData.append('file', fileTemp)
// api接口正常请求即可,只不过传的值是被转换后的form
axios({
  method: 'post',
   url: api,
   data: formData
})
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值