服务器代码

  1. const express = require('express'),
  2.     fs = require('fs'),
  3.     bodyParser = require('body-parser'),
  4.     multiparty = require('multiparty'),
  5.     SparkMD5 = require('spark-md5');
  7. /*-CREATE SERVER-*/
  8. const app = express(),
  9.     PORT = 8888,
  10.     HOST = 'http://127.0.0.1',
  11.     HOSTNAME = `${HOST}:${PORT}`;
  12. app.listen(PORT, () => {
  13.     console.log(`THE WEB SERVICE IS CREATED SUCCESSFULLY AND IS LISTENING TO THE PORT：${PORT}，YOU CAN VISIT：${HOSTNAME}`);
  14. });
  16. /*-中间件-*/
  17. app.use((req, res, next) => {
  18.     res.header("Access-Control-Allow-Origin", "*");
  19.     req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
  20. });
  21. app.use(bodyParser.urlencoded({
  22.     extended: false,
  23.     limit: '1024mb'
  24. }));
  26. /*-API-*/
  27. // 延迟函数
  28. const delay = function delay(interval) {
  29.     typeof interval !== "number" ? interval = 1000 : null;
  30.     return new Promise(resolve => {
  31.         setTimeout(() => {
  32.             resolve();
  33.         }, interval);
  34.     });
  35. };
  37. // 检测文件是否存在
  38. const exists = function exists(path) {
  39.     return new Promise(resolve => {
  40.         fs.access(path, fs.constants.F_OK, err => {
  41.             if (err) {
  42.                 resolve(false);
  43.                 return;
  44.             }
  45.             resolve(true);
  46.         });
  47.     });
  48. };
  50. // 创建文件并写入到指定的目录 & 返回客户端结果
  51. const writeFile = function writeFile(res, path, file, filename, stream) {
  52.     return new Promise((resolve, reject) => {
  53.         if (stream) {
  54.             try {
  55.                 let readStream = fs.createReadStream(file.path),
  56.                     writeStream = fs.createWriteStream(path);
  57.                 readStream.pipe(writeStream);
  58.                 readStream.on('end', () => {
  59.                     resolve();
  60.                     fs.unlinkSync(file.path);
  61.                     res.send({
  62.                         code: 0,
  63.                         codeText: 'upload success',
  64.                         originalFilename: filename,
  65.                         servicePath: path.replace(__dirname, HOSTNAME)
  66.                     });
  67.                 });
  68.             } catch (err) {
  69.                 reject(err);
  70.                 res.send({
  71.                     code: 1,
  72.                     codeText: err
  73.                 });
  74.             }
  75.             return;
  76.         }
  77.         fs.writeFile(path, file, err => {
  78.             if (err) {
  79.                 reject(err);
  80.                 res.send({
  81.                     code: 1,
  82.                     codeText: err
  83.                 });
  84.                 return;
  85.             }
  86.             resolve();
  87.             res.send({
  88.                 code: 0,
  89.                 codeText: 'upload success',
  90.                 originalFilename: filename,
  91.                 servicePath: path.replace(__dirname, HOSTNAME)
  92.             });
  93.         });
  94.     });
  95. };
  97. // 基于multiparty插件实现文件上传处理 & form-data解析
  98. const uploadDir = `${__dirname}/upload`;
  99. const multiparty_upload = function multiparty_upload(req, auto) {
  100.     typeof auto !== "boolean" ? auto = false : null;
  101.     let config = {
  102.         maxFieldsSize: 200 * 1024 * 1024,
  103.     };
  104.     if (auto) config.uploadDir = uploadDir;
  105.     return new Promise(async (resolve, reject) => {
  106.         await delay();
  107.         new multiparty.Form(config)
  108.             .parse(req, (err, fields, files) => {
  109.                 if (err) {
  110.                     reject(err);
  111.                     return;
  112.                 }
  113.                 resolve({
  114.                     fields,
  115.                     files
  116.                 });
  117.             });
  118.     });
  119. };
  121. // 单文件上传处理「FORM-DATA」
  122. app.post('/upload_single', async (req, res) => {
  123.     try {
  124.         let {
  125.             files
  126.         } = await multiparty_upload(req, true);
  127.         let file = (files.file && files.file[0]) || {};
  128.         res.send({
  129.             code: 0,
  130.             codeText: 'upload success',
  131.             originalFilename: file.originalFilename,
  132.             servicePath: file.path.replace(__dirname, HOSTNAME)
  133.         });
  134.     } catch (err) {
  135.         res.send({
  136.             code: 1,
  137.             codeText: err
  138.         });
  139.     }
  140. });
  142. app.post('/upload_single_name', async (req, res) => {
  143.     try {
  144.         let {
  145.             fields,
  146.             files
  147.         } = await multiparty_upload(req);
  148.         let file = (files.file && files.file[0]) || {},
  149.             filename = (fields.filename && fields.filename[0]) || "",
  150.             path = `${uploadDir}/${filename}`,
  151.             isExists = false;
  152.         // 检测是否存在
  153.         isExists = await exists(path);
  154.         if (isExists) {
  155.             res.send({
  156.                 code: 0,
  157.                 codeText: 'file is exists',
  158.                 originalFilename: filename,
  159.                 servicePath: path.replace(__dirname, HOSTNAME)
  160.             });
  161.             return;
  162.         }
  163.         writeFile(res, path, file, filename, true);
  164.     } catch (err) {
  165.         res.send({
  166.             code: 1,
  167.             codeText: err
  168.         });
  169.     }
  170. });
  172. // 单文件上传处理「BASE64」
  173. app.post('/upload_single_base64', async (req, res) => {
  174.     let file = req.body.file,
  175.         filename = req.body.filename,
  176.         spark = new SparkMD5.ArrayBuffer(),
  177.         suffix = /\.([0-9a-zA-Z]+)$/.exec(filename)[1],
  178.         isExists = false,
  179.         path;
  180.     file = decodeURIComponent(file);
  181.     file = file.replace(/^data:image\/\w+;base64,/, "");
  182.     file = Buffer.from(file, 'base64');
  183.     spark.append(file);
  184.     path = `${uploadDir}/${spark.end()}.${suffix}`;
  185.     await delay();
  186.     // 检测是否存在
  187.     isExists = await exists(path);
  188.     if (isExists) {
  189.         res.send({
  190.             code: 0,
  191.             codeText: 'file is exists',
  192.             originalFilename: filename,
  193.             servicePath: path.replace(__dirname, HOSTNAME)
  194.         });
  195.         return;
  196.     }
  197.     writeFile(res, path, file, filename, false);
  198. });
  200. // 大文件切片上传 & 合并切片
  201. const merge = function merge(HASH, count) {
  202.     return new Promise(async (resolve, reject) => {
  203.         let path = `${uploadDir}/${HASH}`,
  204.             fileList = [],
  205.             suffix,
  206.             isExists;
  207.         isExists = await exists(path);
  208.         if (!isExists) {
  209.             reject('HASH path is not found!');
  210.             return;
  211.         }
  212.         fileList = fs.readdirSync(path);
  213.         if (fileList.length < count) {
  214.             reject('the slice has not been uploaded!');
  215.             return;
  216.         }
  217.         fileList.sort((a, b) => {
  218.             let reg = /_(\d+)/;
  219.             return reg.exec(a)[1] - reg.exec(b)[1];
  220.         }).forEach(item => {
  221.             !suffix ? suffix = /\.([0-9a-zA-Z]+)$/.exec(item)[1] : null;
  222.             fs.appendFileSync(`${uploadDir}/${HASH}.${suffix}`, fs.readFileSync(`${path}/${item}`));
  223.             fs.unlinkSync(`${path}/${item}`);
  224.         });
  225.         fs.rmdirSync(path);
  226.         resolve({
  227.             path: `${uploadDir}/${HASH}.${suffix}`,
  228.             filename: `${HASH}.${suffix}`
  229.         });
  230.     });
  231. };
  232. app.post('/upload_chunk', async (req, res) => {
  233.     try {
  234.         let {
  235.             fields,
  236.             files
  237.         } = await multiparty_upload(req);
  238.         let file = (files.file && files.file[0]) || {},
  239.             filename = (fields.filename && fields.filename[0]) || "",
  240.             path = '',
  241.             isExists = false;
  242.         // 创建存放切片的临时目录
  243.         let [, HASH] = /^([^_]+)_(\d+)/.exec(filename);
  244.         path = `${uploadDir}/${HASH}`;
  245.         !fs.existsSync(path) ? fs.mkdirSync(path) : null;
  246.         // 把切片存储到临时目录中
  247.         path = `${uploadDir}/${HASH}/${filename}`;
  248.         isExists = await exists(path);
  249.         if (isExists) {
  250.             res.send({
  251.                 code: 0,
  252.                 codeText: 'file is exists',
  253.                 originalFilename: filename,
  254.                 servicePath: path.replace(__dirname, HOSTNAME)
  255.             });
  256.             return;
  257.         }
  258.         writeFile(res, path, file, filename, true);
  259.     } catch (err) {
  260.         res.send({
  261.             code: 1,
  262.             codeText: err
  263.         });
  264.     }
  265. });
  266. app.post('/upload_merge', async (req, res) => {
  267.     let {
  268.         HASH,
  269.         count
  270.     } = req.body;
  271.     try {
  272.         let {
  273.             filename,
  274.             path
  275.         } = await merge(HASH, count);
  276.         res.send({
  277.             code: 0,
  278.             codeText: 'merge success',
  279.             originalFilename: filename,
  280.             servicePath: path.replace(__dirname, HOSTNAME)
  281.         });
  282.     } catch (err) {
  283.         res.send({
  284.             code: 1,
  285.             codeText: err
  286.         });
  287.     }
  288. });
  289. app.get('/upload_already', async (req, res) => {
  290.     let {
  291.         HASH
  292.     } = req.query;
  293.     let path = `${uploadDir}/${HASH}`,
  294.         fileList = [];
  295.     try {
  296.         fileList = fs.readdirSync(path);
  297.         fileList = fileList.sort((a, b) => {
  298.             let reg = /_(\d+)/;
  299.             return reg.exec(a)[1] - reg.exec(b)[1];
  300.         });
  301.         res.send({
  302.             code: 0,
  303.             codeText: '',
  304.             fileList: fileList
  305.         });
  306.     } catch (err) {
  307.         res.send({
  308.             code: 0,
  309.             codeText: '',
  310.             fileList: fileList
  311.         });
  312.     }
  313. });
  315. app.use(express.static('./'));
  316. app.use((req, res) => {
  317.     res.status(404);
  318.     res.send('NOT FOUND!');
  319. });

axios代码

  1. let instance = axios.create();
  2. instance.defaults.baseURL = 'http://127.0.0.1:8888';
  3. instance.defaults.headers['Content-Type'] = 'multipart/form-data';
  4. instance.defaults.transformRequest = (data, headers) => {
  5.     const contentType = headers['Content-Type'];
  6.     if (contentType === "application/x-www-form-urlencoded") return Qs.stringify(data);
  7.     return data;
  8. };
  9. instance.interceptors.response.use(response => {
  10.     return response.data;
  11. });

基于FORM-DATA实现文件上传

  1. let formData = new FormData();
  2. formData.append('file', _file);
  3. formData.append('filename', _file.name);
  4. instance.post('/upload_single', formData).then(data => {
  5.   if (+data.code === 0) {
  6.     alert(`文件已经上传成功~~,您可以基于 ${data.servicePath} 访问这个资源~~`);
  7.     return;
  8.   }
  9.   return Promise.reject(data.codeText);
  10. }).catch(reason => {
  11.   alert('文件上传失败，请您稍后再试~~');
  12. })
  14. //限制大小
  15. // 获取用户选中的文件对象
  16. //   + name：文件名
  17. //   + size：文件大小 B
  18. //   + type：文件的MIME类型
  19. let file = upload_inp.files[0];
  20. if (!file) return;
  22. // 限制文件上传的格式「方案一」
  23. /* if (!/(PNG|JPG|JPEG)/i.test(file.type)) {
  24.             alert('上传的文件只能是 PNG/JPG/JPEG 格式的~~');
  25.             return;
  26.         } */
  28. // 限制文件上传的大小
  29. if (file.size > 2 * 1024 * 1024) {
  30.   alert('上传的文件不能超过2MB~~');
  31.   return;
  32. }

基于BASE64实现文件上传

  1. // 把选择的文件读取成为BASE64
  2. const changeBASE64 = file => {
  3.   return new Promise(resolve => {
  4.     let fileReader = new FileReader();
  5.     fileReader.readAsDataURL(file);
  6.     fileReader.onload = ev => resolve(ev.target.result);
  7.   });
  8. };
  10. //上传相关代码
  11. let file = upload_inp.files[0],
  12.            BASE64,
  13.            data;
  14. if (!file) return;
  15. if (file.size > 2 * 1024 * 1024) {
  16.   alert('上传的文件不能超过2MB~~');
  17.   return;
  18. }
  19. BASE64 = await changeBASE64(file);
  20. try {
  21.   data = await instance.post('/upload_single_base64', {
  22.     file: encodeURIComponent(BASE64),
  23.     filename: file.name
  24.   }, {
  25.     headers: {
  26.       'Content-Type': 'application/x-www-form-urlencoded'
  27.     }
  28.   });
  29.   if (+data.code === 0) {
  30.     alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 地址去访问~~`);
  31.     return;
  32.   }
  33.   throw data.codeText;
  34. } catch (err) {
  35.   alert('很遗憾，文件上传失败，请您稍后再试~~');
  36. }

文件缩略图 & 自动生成名字

  1. // 把选择的文件读取成为BASE64
  2. const changeBASE64 = file => {
  3.   return new Promise(resolve => {
  4.     let fileReader = new FileReader();
  5.     fileReader.readAsDataURL(file);
  6.     fileReader.onload = ev => {
  7.       resolve(ev.target.result);
  8.     };
  9.   });
  10. };
  12. // 生成文件的HASH名字
  13. const changeBuffer = file => {
  14.   return new Promise(resolve => {
  15.     let fileReader = new FileReader();
  16.     fileReader.readAsArrayBuffer(file);
  17.     fileReader.onload = ev => {
  18.       let buffer = ev.target.result,
  19.           spark = new SparkMD5.ArrayBuffer(),
  20.           HASH,
  21.           suffix;
  22.       spark.append(buffer);
  23.       HASH = spark.end();
  24.       suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1];
  25.       resolve({
  26.         buffer,
  27.         HASH,
  28.         suffix,
  29.         filename: `${HASH}.${suffix}`
  30.       });
  31.     };
  32.   });
  33. };
  35. //上传相关代码
  36. let {
  37.   filename
  38. } = await changeBuffer(_file);
  39. let formData = new FormData();
  40. formData.append('file', _file);
  41. formData.append('filename', filename);
  42. instance.post('/upload_single_name', formData).then(data => {
  43.   if (+data.code === 0) {
  44.     alert(`文件已经上传成功~~,您可以基于 ${data.servicePath} 访问这个资源~~`);
  45.     return;
  46.   }
  47.   return Promise.reject(data.codeText);
  48. }).catch(reason => {
  49.   alert('文件上传失败，请您稍后再试~~');
  50. })
  52. // 文件预览，就是把文件对象转换为BASE64，赋值给图片的SRC属性即可
  53. let file = upload_inp.files[0],
  54.             BASE64;
  55. BASE64 = await changeBASE64(file);
  56. upload_abbre_img.src = BASE64;

进度管控

  1. let file = upload_inp.files[0],
  2.             data;
  3. try {
  4.   let formData = new FormData();
  5.   formData.append('file', file);
  6.   formData.append('filename', file.name);
  7.   data = await instance.post('/upload_single', formData, {
  8.     // 文件上传中的回调函数 xhr.upload.onprogress
  9.     onUploadProgress(ev) {
  10.       let {
  11.         loaded,
  12.         total
  13.       } = ev;
  14.       upload_progress.style.display = 'block';
  15.       upload_progress_value.style.width = `${loaded / total * 100}%`;
  16.     }
  17.   });
  18.   if (+data.code === 0) {
  19.     upload_progress_value.style.width = `100%`;
  20.     await delay(300);
  21.     alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 访问该文件~~`);
  22.     return;
  23.   }
  24.   throw data.codeText;
  25. } catch (err) {
  26.   alert('很遗憾，文件上传失败，请您稍后再试~~');
  27. }

多文件上传

  1. // 循环发送请求
  2. let _files = [];
  3. let upload_list_arr = Array.from(upload_list.querySelectorAll('li'));
  4. _files = _files.map(item => {
  5.   let fm = new FormData,
  6.       curLi = upload_list_arr.find(liBox => liBox.getAttribute('key') === item.key),
  7.       curSpan = curLi ? curLi.querySelector('span:nth-last-child(1)') : null;
  8.   fm.append('file', item.file);
  9.   fm.append('filename', item.filename);
  10.   return instance.post('/upload_single', fm, {
  11.     onUploadProgress(ev) {
  12.       // 检测每一个的上传进度
  13.       if (curSpan) {
  14.         curSpan.innerHTML = `${(ev.loaded / ev.total * 100).toFixed(2)}%`;
  15.       }
  16.     }
  17.   }).then(data => {
  18.     if (+data.code === 0) {
  19.       if (curSpan) {
  20.         curSpan.innerHTML = `100%`;
  21.       }
  22.       return;
  23.     }
  24.     return Promise.reject();
  25.   });
  26. });
  28. // 等待所有处理的结果
  29. Promise.all(_files).then(() => {
  30.   alert('恭喜您，所有文件都上传成功~~');
  31. }).catch(() => {
  32.   alert('很遗憾，上传过程中出现问题，请您稍后再试~~');
  33. }).finally(() => {
  34.   changeDisable(false);
  35.   _files = [];
  36.   upload_list.innerHTML = '';
  37.   upload_list.style.display = 'none';
  38. });

拖拽上传

  1. const uploadFile = async file => {
  2.   if (isRun) return;
  3.   isRun = true;
  4.   upload_mark.style.display = 'block';
  5.   try {
  6.     let fm = new FormData,
  7.         data;
  8.     fm.append('file', file);
  9.     fm.append('filename', file.name);
  10.     data = await instance.post('/upload_single', fm);
  11.     if (+data.code === 0) {
  12.       alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 访问该文件~~`);
  13.       return;
  14.     }
  15.     throw data.codeText;
  16.   } catch (err) {
  17.     alert(`很遗憾，文件上传失败，请您稍后再试~~`);
  18.   } finally {
  19.     upload_mark.style.display = 'none';
  20.     isRun = false;
  21.   }
  22. };
  24. upload.addEventListener('dragover', function (ev) {
  25.   ev.preventDefault();
  26. });
  27. upload.addEventListener('drop', function (ev) {
  28.   ev.preventDefault();
  29.   let file = ev.dataTransfer.files[0];
  30.   if (!file) return;
  31.   uploadFile(file);
  32. });

大文件上传

  1. //文件重命名
  2. const changeBuffer = file => {
  3.   return new Promise(resolve => {
  4.     let fileReader = new FileReader();
  5.     fileReader.readAsArrayBuffer(file);
  6.     fileReader.onload = ev => {
  7.       let buffer = ev.target.result,
  8.           spark = new SparkMD5.ArrayBuffer(),
  9.           HASH,
  10.           suffix;
  11.       spark.append(buffer);
  12.       HASH = spark.end();
  13.       suffix = /\.([a-zA-Z0-9]+)$/.exec(file.name)[1];
  14.       resolve({
  15.         buffer,
  16.         HASH,
  17.         suffix,
  18.         filename: `${HASH}.${suffix}`
  19.       });
  20.     };
  21.   });
  22. };
  24. //文件上传
  25. let file = upload_inp.files[0];
  26. // 获取文件的HASH
  27. let already = [],
  28.     data = null,
  29.     {
  30.       HASH,
  31.       suffix
  32.     } = await changeBuffer(file);
  33. try {
  34.   data = await instance.get('/upload_already', {
  35.     params: {
  36.       HASH
  37.     }
  38.   });
  39.   if (+data.code === 0) {
  40.     console.log('文件信息-------',data,'---------end');
  41.     already = data.fileList;
  42.   }
  43. } catch (err) { }
  45. // 实现文件切片处理 「固定数量 & 固定大小」
  46. let max = 1024 * 100,
  47.     count = Math.ceil(file.size / max),
  48.     index = 0,
  49.     chunks = [];
  50. if (count > 100) {
  51.   max = file.size / 100;
  52.   count = 100;
  53. }
  54. while (index < count) {
  55.   chunks.push({
  56.     file: file.slice(index * max, (index + 1) * max),
  57.     filename: `${HASH}_${index + 1}.${suffix}`
  58.   });
  59.   index++;
  60. }
  62. //上传后成功的回调函数
  63. const complate = async () => {
  64.   // 管控进度条
  65.   index++;
  66.   upload_progress_value.style.width = `${index / count * 100}%`;
  68.   // 当所有切片都上传成功，我们合并切片
  69.   if (index < count) return;
  70.   upload_progress_value.style.width = `100%`;
  71.   try {
  72.     data = await instance.post('/upload_merge', {
  73.       HASH,
  74.       count
  75.     }, {
  76.       headers: {
  77.         'Content-Type': 'application/x-www-form-urlencoded'
  78.       }
  79.     });
  80.     if (+data.code === 0) {
  81.       alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 访问该文件~~`);
  82.       clear();
  83.       return;
  84.     }
  85.     throw data.codeText;
  86.   } catch (err) {
  87.     alert('切片合并失败，请您稍后再试~~');
  88.     clear();
  89.   }
  90. };
  92. // 把每一个切片都上传到服务器上
  93. chunks.forEach(chunk => {
  94.   // 已经上传的无需在上传
  95.   if (already.length > 0 && already.includes(chunk.filename)) {
  96.     complate();
  97.     return;
  98.   }
  99.   let fm = new FormData;
  100.   fm.append('file', chunk.file);
  101.   fm.append('filename', chunk.filename);
  102.   instance.post('/upload_chunk', fm).then(data => {
  103.     if (+data.code === 0) {
  104.       complate();
  105.       return;
  106.     }
  107.     return Promise.reject(data.codeText);
  108.   }).catch(() => {
  109.     alert('当前切片上传失败，请您稍后再试~~');
  110.     clear();
  111.   });
  112. });