一、基本思路

1、使用Image類創(chuàng)建一個新的圖片。
2、將圖片轉(zhuǎn)換成base64。
3、將base64圖片使用File類轉(zhuǎn)換成二進(jìn)制文件流
4、將二進(jìn)制文件流使用 FormData類轉(zhuǎn)換成binary類型提交服務(wù)器。

代碼詳解

Image類創(chuàng)建一個新的圖片

    
   	  let imgLink = "圖片Url地址";
      let tempImage = new Image();
      tempImage.src = imgLink;
      //tempImage.crossOrigin = "*";//提交的服務(wù)器是否需要設(shè)置跨域
      //const headers = { 'token': localStorage.getItem('token') };提交的服務(wù)器是否需要登錄信息
      //tempImage.headers = headers;

圖片轉(zhuǎn)換成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轉(zhuǎn)換成二進(jìn)制文件流

    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.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      let file = new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
      return file
    }

二進(jìn)制流文件提交到服務(wù)器

文章來源地址http://www.zghlxwxcb.cn/news/detail-612043.html

 	  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);//看上圖，我用的是test
        let url = '服務(wù)器地址';
        axios.defaults.headers["Content-Type"] = "multipart/form-data;boundary=" + new Date().getTime();//需要在請求頭中設(shè)置文件格式，以下headers都是設(shè)置的請求頭
        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)//獲得服務(wù)器的返回信息
        }).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類來實(shí)現(xiàn)。但是瀏覽器window中沒有這個類，因此這里就使用瀏覽器中有的方法
      let n = bstr.length
      let 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 = '服務(wù)器地址';
        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)
        })

      }

到了這里，關(guān)于vue3+axios：圖片鏈接轉(zhuǎn)換成二進(jìn)制文件流后并提交服務(wù)器的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！