原

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

155人阅读 2024/12/2 16:49 总访问：740029 评论：0 收藏：0 手机

分类: 前端

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

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 74篇

随笔 14篇

移动开发 6篇

数据库 8篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

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

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}