VUE, JS Base64上传图片或文件。Base64 编码的图片转成二进制图片。封装的直接调用接口的图片上传。canvas生成的图片上传。blob类型的图片文件上传。vue3签字图片上传

代码如下：

    // Base64 编码的图片转成二进制图片
    const base64ToImg = (base64String: string) => {
        const byteString = window.atob(base64String.split(',')[1])
        const mimeString = base64String.split(',')[0].split(':')[1].split(';')[0]
        const ab = new ArrayBuffer(byteString.length)
        const ia = new Uint8Array(ab)
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i)
        }
        const blob = new Blob([ab], { type: mimeString })
        upLoadImg(blob)
    }
    // 调用图片文件上传的接口
    const upLoadImg = async (blob: any) => {
        const formData = new FormData()
        formData.append('file', blob, 'image.png')
        // 其他参数
        formData.append('bucketName', "teacher-certification")
        formData.append('filePath', "clients")
        formData.append('fileType', "1")
        fetch('/oss/api/XXFiles/UpLoadFormFile', {
            method: 'POST',
            headers: {
                // 'Content-Type': 'application/json',
                Authorization:'Bearer '+ getToken() // 替换为你的 token
            },
            body: formData
        })
            .then((response) => {
                console.log('上传成功', response)
                // 后面的其他业务逻辑需要自己操作
            })
            .catch((error) => {
                console.error('上传失败', error)
            })
    }

fetch 获取返回值还要写一个then里边使用tojson才行

fetch('https://api.example.com/data')
  // 这里要多加一个then才能获取到返回值
  .then(response => {
    if (response.ok) {
      return response.json(); // 转换为JSON
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data)) // 这里的data是通过JSON转换的对象
  .catch(error => console.error('There has been a problem with your fetch operation:', error)); // 捕获错误