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
})