• 文件上传的技巧总结
  • 发布于 2个月前
  • 164 热度
    0 评论
  • 浅痕
  • 12 粉丝 5 篇博客
  •   

上传文件是我们在日常开发中最经常遇到的需求,不管是做个APP还是说做个OA管理软件,上传文件,比如上传图片,头像等功能都需要使用文件上传的功能,这里总结一下我们在上传文件的一点总结。

1.<input type='file' /> type 是文件为上传


2.accept:表示可以选择文件MIME 类型,多个MIME类型用英文逗号分开。
常用的MIMI类型:
image/* 图片的所有类型
video/* 视频的所有类型

audio/* 音频的所有类型


3.multiple: ’multiple'支持多文件上传
当用户所在的平台允许使用shift 或者 Control 键时,用户可以选择多个文件。默认是false

4.capture
capture=“camera”相机
capture=“camcorder” 摄像机

capture=“microphone” 录音


5.e.target.files[0]
分析files[0] 类型为File
lastModified
lastModifiedDate
name
size (byte)
type
webkitRelativePath:
 <input  type=“file"  id=“fileInputFront”  accept=“video/*”  capture=“camcorder”  multiple={false}  onChange={this.onFileChange}
/>
private onFileChange = (e: any) => {
  // 拿到file文件的
  console.log(e.target.files[0])
  // 文件上传之前,可以对文件进行一些校验。
}

6.file 文件类型上传云,需要更改参数的类型为formData
const formData = new FormData()
formData.append(“key”, accessKey)
formData.append(“uploadFiles”, file)
})
7.当文件类型特别大的时候,这个时候需要进行大文件上传,大文件上传的思路就把文件进行分片。尤其对于网络不是很理想的情况下,大文件上传就显得很有必要。
分片之后,然后一一调用上传的接口,这就是大文件上传的必要。因此也需要后端同学的支持,在拿到分片的数据进行整合。
思路:
1.分片方式: 在客户端进行分片;
2.服务器端接收方式:使用MultipartFile接收文件
3.服务器端确定是哪个文件的分片: 在客户端按照一定规则(UUID或其他方式)生成唯一名称,在服务器端直接找到与该名称相同的文件片段;
4.拼接文件分片: 使用NIO的方式,将分片追加到已有分片的后面;
5.上传中发生意外(拓展思考????):
A. 断网: 
B. 关闭浏览器:
C. 用户取消;
import React, { Component } from "react"
import Axios from "axios"

const instance = Axios.create({
  baseURL: "https://api.dev.bkjk.com",
  validateStatus: (status: number) => status >= 200 && status < 300,
})

class App extends Component {
  onFileChange = e => {
    const file = e.target.files[0]
    console.log(file)
    let fileName = file.name
    let fileSize = file.size
    console.log("fileSize", fileSize)
    let blockSize = 0.9 * 1024 * 1024
    let num = Math.ceil(fileSize / blockSize)
    let start = 0
    let end = 0
    for (let i = 1; i <= num; i++) {
      end = blockSize * i
      if (end > fileSize) {
        end = fileSize
      }
      let block = file.slice(start, end)
      start = end
      console.log(block)
      let fd = new FormData()
      fd.append("block", block)
      fd.append("name", fileName)
      fd.append("total", num)
      fd.append("index", i)
      instance
        .post("/upload", {
          body: fd,
          async: true,
          processData: false,
          contentType: false,
        })
        .then(data => {
          console.log(data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
  render() {
    return (
      <div className="App">
        <input type="file" onChange={this.onFileChange} />
      </div>
    )
  }
}

export default App

用户评论