文件（切片）上传实现解决方案【面试】【前后端】

最新推荐文章于 2024-04-15 00:07:56 发布

cellinlab

最新推荐文章于 2024-04-15 00:07:56 发布

阅读量1.7k

点赞数 2

分类专栏：日常积累文章标签： html 前端文件上传全栈 Express

本文链接：https://blog.csdn.net/funkstill/article/details/104312066

版权

常见方法

FormData

前端

1.html

<!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>Document</title>
</head>
<body>
  <input type="file" id="fileInp" accept="image/*">
  <br>
  <img src="" alt="" id="serverImg">
  <script src="./js/md5.min.js"></script>
  <script src="./js/ajax.js"></script>
  <script>
    const limitType = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
    const limitSize = 100 * 1024
    fileInp.onchange = async function() {
      let file = fileInp.files[0]
      if(!file) return
      if(!limitType.includes(file.type)){
        alert('文件格式不支持！')
        fileInp.value = null
        return
      }
      if(file.size > limitSize) {
        alert('文件大小超限！')
        fileInp.value = null
        return
      }
      let formData = new FormData() // Content-Type: mutilpart/form-data
      formData.append('chunk', file)
      formData.append('filename', $formatFileName(file.name).filename)
      const result = await $ajax({
        url: 'http://127.0.0.1:5678/single',
        data: formData
      })
      if (result.code == 0) {
        serverImg.src = result.path
      }
    }
  </script>
</body>
</html>

js/ajax.js

function $ajax(options) {
  options = Object.assign({
    url: '',
    method: 'post',
    data: null,
    headers: {}
  }, options)
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest
    xhr.open(options.method, options.url)
    Object.keys(options.headers).forEach(key => {
      xhr.setRequestHeader(key, options.headers[key])
    })
    xhr.onreadystatechange = () => {
      if(xhr.readyState === 4) {
        if(/^(2|3)\d{2}$/.test(xhr.status)) {
          resolve(JSON.parse(xhr.responseText))
          return
        }
        reject(xhr)
      }
    }
    xhr.send(options.data)
  })
}
function $formatFileName(filename) {
  const dotIndex = filename.lastIndexOf('.')
  let name = filename.substring(0, dotIndex)
  const ext = filename.substring(dotIndex+1)
  name = md5(name) + new Date().getTime()
  return {
    hash: name,
    ext,
    filename: `${name}.${ext}`
  }
}

后端

最低0.47元/天解锁文章

cellinlab

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
文件（切片）上传实现解决方案【面试】【前后端】

常见方法FormData前端1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="v...
复制链接

扫一扫