图片文件上传

图片格式转换 公共方法 

// util.js
function base64ImgtoFile(base64data, filename = "file") {
  console.log('bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', base64data)
  let arr = base64data.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);
  console.log(arr, mime, suffix, bstr, u8arr)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime,
  });
}

export {
  base64ImgtoFile
}

上传接口定义

//meetingApi.js

import { commonData } from '@/js/commondata';
import { httpFileUpload } from '@/utils/fileRequest';

// 截图上传
export const uploadScreenShot = (params) => httpFileUpload.upload('/vc/pic/session/upload', params)

定义文件上传请求方法:  axios创建文件上传实例 httpFile， 给实例挂上upload方法

//fileRequest.js

import axios from 'axios';
import { initData } from '@/js/commondata';
import { refreshSign, getIpAddress } from './request/sign-manage';
const REQUEST_TIMEOUT = 30 * 1000 //网络请求timeout时间

const FileRequest = (ipAddress, option = {}) => {
  const httpFile = axios.create({
    baseURL: ipAddress,
    timeout: REQUEST_TIMEOUT,
    headers: {
      "Content-Type": "application/octet-stream",
        // "Content-Type": "multipart/form-data",
    },
    ...option
  });

  // 请求前拦截 在send之前执行 
  httpFile.interceptors.request.use(
    (config) => {
      //每次请求都要刷新sign
      refreshSign(config.url);
      // 重置 初始化  baseURL
      config.baseURL = getIpAddress();
      console.log('config.baseURL', config.baseURL)
      console.log(`FileRequest ${config.url}】:`,config.data )
      return config;
    },
    (error) => {
      console.error('【FHClient net requst error 】:', error)
      return Promise.reject(error);
    }
  );

  /**
   * 上传文件
   */
  httpFile.upload = (path, params)=> {
    const { sessionid, file } = params;
    const curUrl = path + `?sessionid=${sessionid}`
    return httpFile.post(curUrl, file)
  }
  return httpFile;
};

export const httpFileUpload = FileRequest(initData.ipAddress, {});

//business.js
import { base64ImgtoFile } from '@/utils/request/util'
import { uploadScreenShot } from '@/api/meettingApi'

//截图上报
function uploadScreenShotImg(base64Data) {
  const imgFile = base64ImgtoFile(base64Data);
  const params = {
    sessionid: String(commonData.sessionId),
    file: imgFile
  }
  // console.log("9999", params)
  return uploadScreenShot(params).then((res) => {
    // console.log("res-ssssssss", res)
    if (res.data.errcode == 0) {
      return res.data
    } else {
      uploadScreenShot(params)
    }
  })
}

页面上使用

<button onclick="getVideoFrame()">截本地流图</button>
<div id="stepThree">点击远端用户画面，截取远端图</div>

                

<script>

    //截本地流图
    function getVideoFrame() {
      if (screenShare) {
        FHRtcMeetting.screenshot(shareStream).then(res =>{
          // console.log("1111111111111111111111111111",shareStream)
          $("localStreamImg").src = res.url
        }).catch(error => {
            console.error('截投屏流图', error)
            alert(error.errMsg)
        })
      } else {
        FHRtcMeetting.screenshot(localStream_).then(res => {
          // console.log("ggggggggggggggggggggg",localStream_)
          $("localStreamImg").src = res.url
        })
      }
    }

    //截远端流图
    function getVideoFrameRemo(e) {
        let stream = ''
        remoteStreamsArr.map(item => {
            if (item.stream.id_ === e.target.id.slice(6)) {
                stream = item.stream
            }
        })
        FHRtcMeetting.screenshot(stream).then(res => {
          $("remoStreamImg").src = res.url
        })
    }

    //创建视频窗口盒子
    function addView(id) {
        let div = document.createElement("div");
        let divattr = document.createAttribute("class");
        divattr.value = "video-view";
        let divattrId = document.createAttribute("id");
        divattrId.value = id;
        div.setAttributeNode(divattr);
        div.setAttributeNode(divattrId);
        let video_grid = document.querySelector('#video_grid');
        div.onclick = getVideoFrameRemo
        video_grid.appendChild(div);
    }
</script>