文件上传相关

一 FormData 文件怎么上传

是XMLHttpRequest 的接口，用于上传文件, 二进制文件

// file 可以是通过 input 加载的文件
let form = new FormData()
form.append('file', file) // key:value

axios({
...
data: from
...
})

二 blob/file 文件从哪里来

说明: file 是 blob 的一个小类 理论上 blob 的方法 file 都能用

1. input 上传

<input type="file" id="file" onchange="handleFiles(e)">
function handleFiles(e) {
	console.log(e.target.files) // file
}

2. new Bolb(array,option)

var blob = new Blob(["hollo world"], {type : 'text/plain'}); // blob

// 也可直接将file 传给 Blob 可用于大文件的切割
var blob = new Blob([file])
blob.slice(start:number,end:number,contentType:string)

三 FileReader 文件本地预读显示(text、image)

<div id="textDom"></div>
<img id="imgDom" src="" alt="">

var reader = new FileReader()
// .txt
if (file.type.includes('text')) {
    reader.readAsText(file) // 异步
}
// imgae
if (file.type.includes('image')) {
    reader.readAsDataURL(file) // 异步
}
// 读取完成后
reader.onload = function () {
    const divDom = document.getElementById("textDom") // 文本
    const imgDom = document.getElementById("imgDom") // image
    divDom.innerHTML = this.result // 保存在 result 中
    imgDom.src=this.result
}

本地预览完整代码

  <input type="file" id="file" onchange="filesChange(e)">
  <div id="textDom"></div>
  <img id="imgDom" src="" alt="">
  <script>
    function filesChange(e) {
      const files = e.target.files
      if (files.length) {
        var file = files[0]
        // var blob = new Blob([file])
        var reader = new FileReader()
        // 读取文件 异步
        if (file.type.includes('text')) {
          reader.readAsText(file) // blob
        }
        if (file.type.includes('image')) {
          reader.readAsDataURL(file) // blob
        }
        // 读取完成后
        reader.onload = function () {
          const inputDom = document.getElementById("file")
          const divDom = document.getElementById("textDom")
          const imgDom = document.getElementById("imgDom")
          // divDom.innerHTML = this.result; // 保存在 result 中
          imgDom.src = this.result
        }
      }
    }
  </script>