Java MultipartFile file前端怎么调用 前端file对象

前端通过 URL 获取 File 对象

• 介绍
• 获取文件类型
• 推荐阅读

• Vue源码学习目录
• 连点成线 - 前端成长之路

你越是认真生活，你的生活就会越美好！

介绍

公司里的项目因为 excel 表格类型多，不同表格之间差距比较大，前端难以开发能复用的组件，所以最近引入了 SpreadJS ，来处理 Excel 表格，支持直接导入 excel 文件，在页面里生成类似于 excel 表格的功能，支持编辑，导出 excel，生成 json 之类的功能，这样相关的页面功能不需要前端开发，达到开源（猿）节流的作用

新的数据可以直接通过上传 excel 文件处理，但是旧数据只有excel的 url 地址，没有 File 格式的内容，所以需要通过 URL 得到 File 的方法，代码如下(可直接复制使用)

async function getFile(url, fileName) {
// 通过 url 获取到 File
  function getFileFromUrl(url, fileName) {
    return new Promise((resolve, reject) => {
      let blob = null
      let xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      // 这里设置接收的响应体类型(试了不设置也正常)
      xhr.setRequestHeader('Accept', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
      xhr.responseType = 'blob'
      // 加载时处理(异步)
      xhr.onload = () => {
        // 获取返回结果
        blob = xhr.response
        console.log('blob:', blob)
        let file = new File([blob], fileName, { type: blob.type })
        // 返回结果
        resolve(file)
      }
      xhr.onerror = (e) => {
        reject(e)
      }
      // 发送
      xhr.send()
    })
  }
  const file = await getFileFromUrl(url, fileName)
  console.log('file:', file)
}
// 这个地址没有跨域问题 https://img2.baidu.com/it/u=2149607209,2234358780&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=255  
let url1 = 'https://bargaining.oss-cn-shenzhen.aliyuncs.com/upload/2020/9/15/1600153305138.xlsx?Expires=4753753305&OSSAccessKeyId=LTAIHonqvbarNqaq&Signature=f%2Fstpo0rlI2TUkbGiNZzo6fT%2Fto%3D'
const fileName = '文件名称'
getFile(url1, fileName)

如果遇到下面的跨域报错，需要找运维在文件地址的域名配置跨域，详情可读15 张精美动图全面讲解 CORS(跨域资源共享、同源策略)

Access to XMLHttpRequest at 'https://bargaining.oss-cn-shenzhen.aliyuncs.com/upload/2020/9/15/1600153305138.xlsx?Expires=4753753305&OSSAccessKeyId=LTAIHonqvbarNqaq&Signature=f%2Fstpo0rlI2TUkbGiNZzo6fT%2Fto%3D' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

配置跨域如下图

配好跨域后，执行完会得到如下的打印信息

如果遇到下面的错误，说明当前访问地址为https协议，而请求的 url 地址，为 http 协议，需要将请求的地址改为 https 协议，或者直接去掉url地址的协议前缀，这样会自动匹配

当前访问地址为http协议的话，请求的 url 地址为http协议或者https协议都能正常请求

index.js:375 Mixed Content: The page at 'https://skyeye-admin.aupup.com/enterprise-info' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://img2.baidu.com/it/u=2149607209,2234358780&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=255'. This request has been blocked; the content must be served over HTTPS.

获取文件类型

这里提供获取文件类型的一种方法，需要先下载文件到本地，然后手动上传

const input = document.createElement('input')
input.setAttribute('type', 'file')
document.body.appendChild(input)
input.addEventListener('change', (e)=> {
    console.log(e.target)
    console.log(e.target.files[0])
    console.log(e.target.files[0].type)
})
input.click()
// 上传本地文件后 可以查看对应的 File ,里面的 type 就是文件类