url转file,上传视频截取封面

1、图片url转file

方法1 (视频,音频等也适用)

const getImageFileFromUrl = (url, imageName,type) => {
    
    
  return new Promise((resolve, reject) => {
    
    
    let blob = null;
    let imgFile = null;
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    // xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
    xhr.setRequestHeader("Accept", "image/png");
    xhr.responseType = "blob";
    xhr.onload = () => {
    
    
      blob = xhr.response;
      imgFile = new File([blob], imageName, {
    
     type: "image/png" });
      resolve(imgFile);
    };
    xhr.onerror = e => {
    
    
      reject(e);
    };
    xhr.send();
  });
}
// 使用
photosList.value.map(async(it,index)=>{
    
    
	let imgFile = await getImageFileFromUrl(it.url, it.name, "image/png")
	console.log('imgFile',imgFile)
})
// 根据图片视频音频类型，传不同得type即可 "image/png","video/mp4", 'audio/mpeg', "application/zip"

方法2

先转base64, 再base64转file

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/jpeg" + ext);
  return dataURL;
}

const base64ToFile = (urlData, fileName) => {
    
    
  let arr = urlData.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bytes = atob(arr[1]); // 解码base64
  let n = bytes.length
  let ia = new Uint8Array(n);
  while (n--) {
    
    
    ia[n] = bytes.charCodeAt(n);
  }
  return new File([ia], fileName, {
    
     type: mime });
}

const handleImgToBase64 = async (url, name) => {
    
    
  return new Promise((resolve, reject) => {
    
    
    var image = new Image();
    image.crossOrigin = '';
    image.src = url;
    image.onload = function () {
    
    
      let base64 = imageToBase64(image); //图片转base64
      let file = base64ToFile(base64, name); //base64转File
      resolve(file);
    }
  })
}
//使用
let ff = await handleImgToBase64('http://xxxx', '图片.png')

2、file文件通过formdata提交

向formData里添加数据： formData.append(key, value)，key不存在则会新增一条数据，如果key存在，则添加到数据的末尾，value会是一个数组；
获取key下的值: formData.getAll(key);
清空formData :

formData.forEach(function (value, key) {
      formData.delete(key);
 });

不用在header里写Content-Type 参考

const formData = new FormData()
const handleSubmit = async () => {
    
    
  videosLiat.value.forEach(it => {
    
    
    formData.append('videos', it.file as File)
  })
  photosLiat.value.forEach(it => {
    
    
    formData.append('photos', it.file as File)
  })
  Object.keys(model).forEach((key) => {
    
     // modal是表单其他的数据
    formData.append(
      key,
      model[key as keyof UploadCustomRequestOptions['data']]
    )
  })
  const {
    
     data: dataD, pending, refresh, error } = await useFetch('http://xxxx', {
    
    
    method: 'post',
    headers: {
    
    
    // "Content-Type": "multipart/form-data",
      Authorization: 'xxx'
    },
    body: formData,
  })
 }

3、上传视频时截取视频第一帧作为封面

// 获取file文件url
const getFileURL = (file) => {
    
    
  var url = null;
  if (window.URL != undefined) {
    
     // mozilla(firefox)
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    
     // webkit or chrome
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
}
// 截取视频第一帧，为base64
const getVideoBase64 = (url) => {
    
    
  return new Promise(function (resolve) {
    
    
    let dataURL = "";
    const video = document.createElement("video");
    video.setAttribute("crossOrigin", "anonymous"); // 处理跨域
    video.setAttribute("src", url);
    video.setAttribute("preload", "auto");
    video.addEventListener("loadeddata", function () {
    
    
      const canvas = document.createElement("canvas");
      console.log("video.clientWidth", video.videoWidth); // 视频宽
      console.log("video.clientHeight", video.videoHeight); // 视频高
      const width = video.videoWidth || 400; // canvas的尺寸和图片一样
      const height = video.videoHeight || 240; // 设置默认宽高为  400  240
      canvas.width = width;
      canvas.height = height;
      canvas.getContext("2d").drawImage(video, 0, 0, width, height); // 绘制canvas
      dataURL = canvas.toDataURL("image/jpeg"); // 转换为base64
      resolve(dataURL);
    })
  })
}
// base64转图片file
const getFileFromBase64 = (base64URL, filename) => {
    
    
  var arr = base64URL.split(","),
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    
    
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {
    
     type: "image/png" });
}
// 使用
const objUrl = getFileURL(file.file as File)
const objBase = await getVideoBase64(objUrl) // 截取视频第一帧
const objCoverFile = await getFileFromBase64(objBase, `${
      
      file.name.split('.')[0]}.jpeg`) // 第一帧转file