• input | [accept](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#accept) | 一个或多个 unique file type specifiers 描述允许的文件类型/文件格式 | | :—- | :—- | | [capture](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#capture) | 捕获图像或视频数据的源 | | [files](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#files) | FileList 列出了已选择的文件 | | [multiple](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#multiple) | 布尔值，如果出现，则表示用户可以选择多个文件 |

FormData

  1. var formData = new FormData();
  2. var photos = document.querySelector("input[type='file'][multiple]");
  4. formData.append('title', 'My Vegas Vacation');
  5. // formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入
  6. for (let i = 0; i < photos.files.length; i++) { 
  7.     formData.append('photo', photos.files[i]); 
  8. }
  10. fetch('https://example.com/posts', {
  11.   method: 'POST',
  12.   body: formData
  13. })
  14. .then(response => response.json())
  15. .then(response => console.log('Success:', JSON.stringify(response)))
  16. .catch(error => console.error('Error:', error));

Base64上传

  • 流文件 ```javascript //canvas export const getBase64 = (img) => { function getBase64Image (img, width, height) { // width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小 var canvas = document.createElement(‘canvas’) canvas.width = width || img.width canvas.height = height || img.height var ctx = canvas.getContext(‘2d’) ctx.drawImage(img, 0, 0, canvas.width, canvas.height) var dataURL = canvas.toDataURL() return dataURL } var image = new Image() image.crossOrigin = ‘anonymous’ image.src = img return new Promise((resolve, reject) => { image.onload = function () {
    1. resolve(getBase64Image(image))// 将base64传给done上传处理
    } }) } export const getFile = (dataurl, filename) => { // 将base64转换为文件 var arr = dataurl.split(‘,’) var mime = arr[0].match(/:(.*?);/)[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n—) { u8arr[n] = bstr.charCodeAt(n) } return new File([u8arr], filename, {type: mime}) } //FileReader() export ()=>{ return Promise(resove=>{ let fileRead = new FileReader() fileRead.readAsDataURL(file) //readAsArrayBuffer(转Buffer) fileRead.onload=>ev=>resove(ev.tagret.result) }) }
  1. <a name="EbJUW"></a>
  2. ## 大文件上传
  4. 1. 大文件切片(6-7)（HTTP可以多个并发传递） file.prototype.slice
  5. 1. 同时发送5个切片请求
  6. 1. 合并请求
  8. 文件格式
  9. ```javascript
  10. //Firefox
  11. 1.
  12. chunk:文件切片
  13. filename:切片名字 hash-number .png/jpg
  14. //node
  15. 2. 
  16. upload
  17. //merge
  18. 3. 请求
  19. 合并
将size分割
function Tailoring(files) {
    let size = files.size / 5
    let i = 0
    let j = []
    let k = 0
    while (i < 5) {
        j.push({ check: files.slice(k, k + size), name: files.name + '-' + i })

        k = k + size

        i++
    }
    return j
}

//发送图片上传
let file = () => {
    let files = document.querySelector('input').files[0]
    let k = Tailoring(files) [size1,size2...]
    // console.log(k)
    let f = k.map(item => {
        let formdata = new FormData()
        formdata.append("img",item.check)
        return fetch('http://localhost:3000/api', {
            method: 'POST',
            body: formdata
        })
        .then(res=>res.json())

    })
    //等待所以图片上传告诉服务端拼接图片
    let as = Promise.all(f)
    as.then(r=>{
        //通过r判断是否完整上传
        let ary = r.map(item=>item.name)
        //console.log(ary)
        //告知服务端拼接图片
        fetch(`http://localhost:3000/mesage/${ary}`)
        .then(res=>console.log(res))
     } )
}

//服务端拼接
let data = req.params.id.split(',')
//获取每一个需要拼接的名称
    let ws=fs.createWriteStream('./{名称}.jpeg');
//流
    data.map(item=>{
            let imgs = fs.readFileSync(`./uploads/${item}`)
            ws.write(imgs)
    })
ws.end()