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

电脑版发表于：2024/12/2 16:49

代码如下：
```
    // 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)); // 捕获错误
```

TeachingNote

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

{{item.title}}