• JavaScript获取文件的file对象数据（不通过input）

    background

    最近遇到了一个图标库的需求，页面提供一些图标供用户进行选择，之前是直接让用户手动的选择电脑上的某一个图标文件进行上传的，上传图标功能用的是element组件库中的upload组件实现的，主要原理就是获取到图片的file对象，然后调用后端的upload接口，将图片的file对象数据传给后端进行上传，上传成功后接口会返回一个在线的图标地址，前端就可以通过改地址对图标进行展示，并进行设置；

    problem

    之前获取文件的file对象都是通过type为file的input标签手动的去选择文件，然后获取input的files属性就可以拿到对应文件的file数据了，然而这个图标库的功能就是让用户选择我们提供的图标的，而不是手动的选择自己电脑本地的文件。所以就没办法通过input标签实现；自己网上找了一些解决方案没有找到合适的，最后请教同事，同事那边提供了一个解决方案，实现原理是通过手动触发一个XHR请求，请求地址为当前图片的地址，获取请求相应的数据，并通过该数据使用new File去创建一个file对象，这个file对象就是目标文件的file；具体代码如下：

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <input type="file" />
  <img src="./images/test.png" style="width: 400px">
  <script>

    let inputEl = document.querySelector('input')

    let imgEl = document.querySelector('img')

    inputEl.addEventListener('change', () => {

      let file = inputEl.files[0]

      console.log('通过input获取', file)

    })

    imgEl.addEventListener('click', clickHandle)

    function clickHandle(e) {

      getImageFileFromUrl(e.target.currentSrc).then(file => {

        // 获取图片对应的file对象
        console.log('通过XHR获取', file)

      })

    }

    // url: "http://127.0.0.1:5500/images/test.png"
    function getImageFileFromUrl(url) {
      // 截取图片名称
      let imageName = url.substring(url.lastIndexOf('/') + 1)
      // 截取图片后缀名
      let suffixName = imageName.split('.')[1]

      return new Promise((resolve, reject) => {

        let blob = null

        let xhr = new XMLHttpRequest()

        xhr.open("GET", url)

        xhr.setRequestHeader('Accept', 'image/jpeg')

        xhr.responseType = "blob"

        xhr.onload = () => {
          blob = xhr.response
          let imgFile = new File([blob], imageName, { type: `image/${suffixName}` })
          resolve(imgFile)
        }

        xhr.onerror = (e) => {
          reject(e)
        }

        xhr.send()

      })
    }

  script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78

    在这里插入图片描述

    end

    最后就可以通过将拿到的file对象转为FormData格式的数据传给后端的upload接口，实现图片的上传了；

    let formData = new FormData()
formData.append('file', file)

    • 1
    • 2
  • 相关阅读:
    大话Stable-Diffusion-Webui-客制化主题（四）
    ArrayList与顺序表
    Cesium教程(二十)：动态加载图片
    基于阿里云oss的文件管理系统
    Vue通过ref修改 ＜el-input-number＞ 增减按钮的样式
    Canvas相关概念集合
    IDEA版SSM入门到实战（Maven+MyBatis+Spring+SpringMVC) -Maven使用前准备
    国稻种芯百团计划行动 丰收节贸促会·袁隆平：水稻国际竞争
    【Cherno的OpenGL视频】How to make your uniform faster in OpenGL
    ZYNQ之FPGA学习----MMCM/PLL IP核使用实验
  • 原文地址：https://blog.csdn.net/weixin_44120487/article/details/126614783