vue3+axios：图片链接转换成二进制文件流后并提交服务器

一、基本思路

1、使用Image类创建一个新的图片。
2、将图片转换成base64。
3、将base64图片使用File类转换成二进制文件流
4、将二进制文件流使用 FormData类转换成binary类型提交服务器。

代码详解

Image类创建一个新的图片

    let imgLink = "图片Url地址";let tempImage = new Image();tempImage.src = imgLink;//tempImage.crossOrigin = "*";//提交的服务器是否需要设置跨域//const headers = { 'token': localStorage.getItem('token') };提交的服务器是否需要登录信息//tempImage.headers = headers;

图片转换成base64

    const imageToBase64 = (img) => {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);return dataURL}

base64转换成二进制文件流

    const base64toFile = (dataurl, filename = 'file') => {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}let file = new File([u8arr], `${filename}.${suffix}`, {type: mime})return file}

二进制流文件提交到服务器

       let imgLink = "图片Url地址";let tempImage = new Image();tempImage.src = imgLink;tempImage.onload = function () {let base64 = getBase64Image(tempImage);let file = base64toFile(base64);const formData = new FormData();formData.append('test', file);//看上图，我用的是testlet url = '服务器地址';axios.defaults.headers["Content-Type"] = "multipart/form-data;boundary=" + new Date().getTime();//需要在请求头中设置文件格式，以下headers都是设置的请求头axios.defaults.headers['token'] = localStorage.getItem('token');//登录时获得的token信息axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'axios.post(url, formData).then(res => {console.log(res.data)//获得服务器的返回信息}).catch(err => {console.log(err)})}

完整代码

import axios from "axios";
const getBase64Image = (img) => {var canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);return dataURL}
const base64toFile = (dataurl, filename = 'file') => {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])//atob() 方法用于解码使用 base-64 编码的字符串，浏览器中需要使用这个方法，nodeJS中会提示使用Buffer类来实现。但是浏览器window中没有这个类，因此这里就使用浏览器中有的方法let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}let file = new File([u8arr], `${filename}.${suffix}`, {type: mime})return file}let imgLink = "图片链接地址";let tempImage = new Image();tempImage.src = imgLink;tempImage.crossOrigin = "*";const headers = { 'token': localStorage.getItem('token') };tempImage.headers = headers;tempImage.onload = function () {let base64 = getBase64Image(tempImage);let file = base64toFile(base64);const formData = new FormData();formData.append('faceFile', file);let url = '服务器地址';axios.defaults.headers["Content-Type"] = "multipart/form-data;boundary=" + new Date().getTime();axios.defaults.headers['token'] = localStorage.getItem('token');axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'axios.post(url, formData).then(res => {console.log(res)}).catch(err => {console.log(err)})}

vue3+axios：图片链接转换成二进制文件流后并提交服务器相关推荐

obsidian图片链接转换成markdown语法，不关闭wiki链接
问题近期尝试使用了obsidian作为我的笔记软件,但是发现obsidian的图片链接会自动使用wiki链接的方式保存,比如这样的格式![[图片路径]],但是这样的路径,一般的markdown编辑器 ...
base64格式图片转换成二进制流并生成图片文件
1.base64格式图片转换成二进制流并生成图片文件 /*** 将base64格式的字符串转换成二进制流,并转换成图片*/ public boolean changeBase64ToImage(Str ...
75. InputStreamReader和OutputStreamWriter（转换流--字节流转换成字符流）
转换流: InputStreamReader 输入字节流转换成输入字符流 OutputStreamWriter 输出字节流转换成输出字符流总结:就是字节流转换成字符流,但是不能字节流转换成字节 ...
java将图片的url转换成File，File转换成二进制流byte
package com.xqy;import java.io.*; import java.net.HttpURLConnection; import java.net.URL; //java将图片的 ...
Android代码（Handler的运用），HttpURLConnection的应用，将url图片地址转换成图片。
1 布局文件, <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...
带字的图片如何转换成可编辑的文字？
将图片文字转换成可编辑的文字,有很多方法可以选择,可以使用输入法打字的方法,将图片上的文字输入到电脑文档中:还可以使用OCR文字识别软件的方法,把图片文字识别出来,然后保存到word文档中: 上面的两 ...
C#调用大华相机SDK获取图片，转换成VisionPro的Icogimage格式
文章讲的是C#调用大华相机SDK,通过回调事件获取图片并转换成visionpro的Icogimage格式,文章底部会分享例程.在调用SDK之前,需要先安装大华的相机软件到C盘,不安装到C盘会显示依赖项 ...
python图片raw转换成jpg
代码: import numpy as np import imageiorawfile = np.fromfile('./_DSC7472.ARW', dtype=np.float32) # 以fl ...
怎么把图片文件转换成PDF文件
除了office文件外,我们最常用的就是PDF文件了.因为PDF文件格式可以将文字.字型.格式.颜色及独立于设备和分辨率的图形图像等封装在一个文件中.该格式文件还可以包含超文本链接.声音和动态影像等 ...

vue3+axios：图片链接转换成二进制文件流后并提交服务器

一、基本思路

代码详解

Image类创建一个新的图片

图片转换成base64

base64转换成二进制文件流

二进制流文件提交到服务器

完整代码

vue3+axios：图片链接转换成二进制文件流后并提交服务器相关推荐

最新文章

热门文章