美文网首页
H5:上传图片

H5:上传图片

作者: 春暖花已开 | 来源:发表于2021-12-10 17:46 被阅读0次
// base64转文件流
base64toFile(dataurl, filename = new Date().valueOf()) {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const suffix = mime.split('/')[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
      type: mime
  })
}

// 注意:上传图片要用post请求,并且将header设置为 'Content-Type': 'multipart/form-data'
async excuteUploadImage() {
  const fileField = `data:image/png;base64,${photoStr}`
  const form = new FormData()
  form.append('file', this.base64toFile(fileField))
  const photoRes = await uploadFile(form)
}

相关文章

  • Webview图片上传方法

    H5交互-图片上传 图片上传 H5使用file标签进行文件上传,我们可以重写webview的webchromeCl...

  • 解决小程序webview中无法上传图片问题

    最近被支付宝小程序内嵌H5无法上传图片折磨到没脾气,H5本身上传图片没问题,但是嵌套在小程序中就无法上传。 在调试...

  • APP的H5页面实现图片预览及压缩上传

    导语 本篇文章使用H5实现图片预览,压缩上传的功能,主要用到了以下知识点。 使用 获取上传的图片文件 使用H5 F...

  • 图片压缩上传

    参考1-HTML5实现图片压缩上传功能参考2-移动前端—图片压缩上传实践参考3-移动端H5图片压缩上传 大体步骤 ...

  • 图片压缩上传

    关键词:h5 FileReader、canvas压缩、多图片上传 一、前言 做过前端的同学都知道,图片上传是我们遇...

  • h5上传图片压缩包服务端解压并上传图片

    CMS后台有上传多个图片的需求,多个图片上传也一样麻烦。就想做个上传压缩包服务端解压上传的东西。 页面 使用h5的...

  • 图片中间部分显示

    手机H5仿微信多图上传中已经完成了图片上传的那部分,这篇文章主要讲的是图片展示的部分,效果图如下: 因为上传的图片...

  • vue 利用H5formData方式上传图片,解决IOS拍照旋转

    解决OIS 拍照旋转等问题,结合H5 formData的方式上传图片...

  • H5图片上传

    上传时,确保ios和安卓手机都能出现相册和拍照 把input自带的界面去除,用透明度:opacity:0。外框设置...

  • H5上传图片

    一、HTML 1、input使用type=file进行文件选择;2、capture="camera"表示可以捕获到...

网友评论

      本文标题:H5:上传图片

      本文链接:https://www.haomeiwen.com/subject/iyacfrtx.html