devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

amis 文件上传 & 大文件分块上传

作者：小丑西瓜9 | 2024-05-31 05:25:12

赞

踩

amis 文件上传 & 大文件分块上传

amis 图片/文件上传组件

receiver：参数配置为上传接口。

  1. {
  2.   "type": "input-image", // "type": "input-file",
  3.   "label": "照片",
  4.   "name": "url", 
  5.   "imageClassName": "r w-full",
  6.   "receiver": "/lbserver/api/FileUpload/upload/mPersonnelInfo/Images/${TIMESTAMP(NOW(),'x')}",
  7.   "accept": ".jpeg, .jpg, .png, .gif",
  8.   "fixedSize": false,
  9.   "hideUploadButton": false,
  10.   "autoUpload": true,
  11.   "compress": false,
  12.   "compressOptions": {},
  13.   "crop": false
  14. }

amis分块上传：

分块上传所需的处理如下流程图所示：

文件上传文件如果过大的话，如果不加任何处理，这个请求就会一直处于PENDING状态（最后肯定是超时的）

pending（挂起）：网络处于挂起状态，指发送的请求是“进行中”的状态，但还没有接到服务端的响应，一旦服务端做出响应，时间将被更新为总运行时间。

0、前端amis分片逻辑如下：（了解即可，一般分片逻辑无需自己实现，用现成组件库）

• 由于前端已有 Blob Api 能操作文件二进制，因此最核心逻辑就是前端运用 Blob Api 对大文件进行文件分片切割，将一个大文件切成一个个小文件，然后将这些分片文件一个个上传。

• 现在 http 请求基本是 1.1 版本，浏览器能够同时进行多个请求，通过Promise进行异步并发控制处理。

• 当前端将所有分片上传完成之后，前端再通知后端进行分片合并成文件。

amis/src/renderers/Form/InputFile.tsx

  1.       //调用startChunkApi 成功后执行startChunk进行分块
  2.       self._send(file, startApi).then(startChunk).catch(reject); 
  3.  
  4.       async function startChunk(ret: Payload) {
  5.         onProgress(startProgress);
  6.         const tasks = getTasks(file); //根据chunkSize分块大小（默认5M）生成分块任务集合
  7.         progressArr = tasks.map(() => 0);
  8.  
  9.         if (!ret.data) {
  10.           throw new Error(__('File.uploadFailed'));
  11.         }
  12.  
  13.         state = {
  14.           key: (ret.data as any).key,
  15.           uploadId: (ret.data as any).uploadId,
  16.           loaded: 0,
  17.           total: tasks.length
  18.         };
  19.  
  20.         let results: any[] = [];
  21.         while (tasks.length) {
  22.           const res = await Promise.all(
  23.             tasks.splice(0, concurrency).map(async task => {//根据concurrency 控制并行上传数量，默认是 3
  24.               return await uploadPartFile(state, config)(task); //Blob.slice API进行分块 并调用chunkApi上传
  25.             })
  26.           );
  27.           results = results.concat(res);
  28.         }
  29.         finishChunk(results, state);//finishChunkApi 结束分片
  30.       }

1.amis分块上传参数配置

Amis上传组件如果文件过大，则可能需要使用分块上传，默认大于 5M（chunkSize 配置决定） 的文件是会自动开启，可以通过 useChunk 配置成 false 关闭。(不要手动配置useChunk:true,会导致只使用chunk切片上传)

  1. {
  2.   "type": "input-file",
  3.   "id": "u:dbd914e494e9",
  4.   "label": "File",
  5.   "name": "file",
  6.   "autoUpload": true,
  7.   "uploadType": "fileReceptor",
  8.   "accept": "*",
  9.   "receiver": "/lbserver/api/FileUpload/upload/mProjectInfo/Images/${TIMESTAMP(NOW(),'x')}",
  10.   "startChunkApi": "/lbserver/api/FileUpload/startChunkApi",
  11.   "chunkApi": "/lbserver/api/FileUpload/chunkApi/upload/mProjectInfo/Images",
  12.   "finishChunkApi": "/lbserver/api/FileUpload/finishChunkApi/upload/mProjectInfo/Images",
  13.   "hidden": false,
  14.   "btnLabel": "文件上传",
  15.   "submitType": "asUpload"
  16. }

2.分块上传相关的三个后端接口（loopback4.0框架 文件上传基于multer）：

multer中间件只处理 multipart/form-data 类型的表单数据的函数，主要用于上传文件。

Multer在解析完请求体后，会向request对象中添加一个body对象和一个file或files对象（上传多个文件时使用files对象 ）。其中，body对象中包含所提交表单中的文本字段（如果有），而file(或files)对象中包含通过表单上传的文件。

  1. import { inject, service } from '@loopback/core';
  2. import {
  3.   del,
  4.   get,
  5.   getModelSchemaRef,
  6.   param,
  7.   patch,
  8.   post,
  9.   Request,
  10.   requestBody,
  11.   response,
  12.   Response,
  13.   RestBindings,
  14. } from '@loopback/rest';
  15. import _ from 'lodash';
  16. import { FILE_UPLOAD_SERVICE } from '../../keys';
  17. import { FileUploadHandler } from '../../types';
  18.  
  19. const moment = require('moment');
  20. const SparkMD5 = require('spark-md5');
  21. const util = require('util');
  22. const mime = require('mime');
  23. const fs = require('fs-extra');
  24. const path = require('path');
  25. const child_process = require('child_process');
  26.  
  27. function getFilesAndFields(request: Request) {
  28.   const uploadedFiles = request.files;
  29.   const mapper = (f: globalThis.Express.Multer.File) => ({
  30.     fieldname: f.fieldname,
  31.     originalname:
  32.       request.body && request.body.key && request.body.partNumber
  33.         ? `${request.body.key}-${request.body.partNumber}`
  34.         : f.originalname,
  35.     encoding: f.encoding,
  36.     mimetype: f.mimetype,
  37.     size: f.size,
  38.   });
  39.   let files: object[] = [];
  40.   if (Array.isArray(uploadedFiles)) {
  41.     files = uploadedFiles.map(mapper);
  42.   } else {
  43.     for (const filename in uploadedFiles) {
  44.       files.push(...uploadedFiles[filename].map(mapper));
  45.     }
  46.   }
  47.   return { files, fields: request.body };
  48. }
  49.  
  50.  
  51. export class FileUploadController {
  52.   constructor(
  53.     @inject(FILE_UPLOAD_SERVICE) private handler: FileUploadHandler,
  54.   ) { }
  55.  
  56.   @post(`FileUpload/startChunkApi`)
  57.   @response(200, {
  58.     description: 'FileUpload model instance',
  59.     content: { 'application/json': { schema: getModelSchemaRef(FileUpload) } },
  60.   })
  61.   async startChunkApi(@requestBody() pl: any): Promise<any> {
  62.     let uploadId = generateUUID();
  63.     let key = `${moment().format('X')}-${pl.filename}`;
  64.     return {
  65.       status: 0,
  66.       data: {
  67.         date: new Date(),
  68.         uploadId: uploadId,
  69.         key: key,
  70.       },
  71.     };
  72.   }
  73.  
  74.   @post(`FileUpload/chunkApi/{upload}/{model}/{type}`)
  75.   @response(200, {
  76.     description: 'FileUpload model instance',
  77.     content: { 'application/json': { schema: getModelSchemaRef(FileUpload) } },
  78.   })
  79.   async chunkApi(
  80.     @param.path.string('upload') upload: string,
  81.     @param.path.string('model') model: string,
  82.     @param.path.string('type') type: string,
  83.     @requestBody.file()
  84.     request: Request,
  85.     @inject(RestBindings.Http.RESPONSE) response: Response,
  86.   ): Promise<any> {
  87.     // console.log(model, type);
  88.     return new Promise<any>((resolve, reject) => {
  89.       this.handler(request, response, err => {
  90.         if (err) reject(err);
  91.         else {
  92.           let uploadId = request.body.uploadId; // id
  93.           // let key = request.body.key;
  94.           // let partNumber = request.body.partNumber;
  95.           const f = getFilesAndFields(request);
  96.           if (f.files && f.files.length > 0) {
  97.             for (const i in f.files) {
  98.               const m = f.files[i] as any;
  99.               fs.mkdirpSync(
  100.                 path.resolve(`./public/${upload}/${model}/${type}/${uploadId}`),
  101.               );
  102.               const o_file = `./.sandbox/${m.originalname}`;
  103.               let eTag = SparkMD5.hashBinary(fs.readFileSync(o_file, 'binary')); //不指定编码 返回buffer对象
  104.               const m_file = `./public/${upload}/${model}/${type}/${uploadId}/${m.originalname}`;
  105.               fs.rename(o_file, m_file, function (err: any) {
  106.                 if (err) {
  107.                   child_process.execSync(`mv ${o_file} ${m_file}`);
  108.                   console.log(err);
  109.                 }
  110.               });
  111.               const result = {
  112.                 name: m.originalname,
  113.                 eTag: eTag,
  114.               };
  115.               resolve({
  116.                 status: 0,
  117.                 msg: '',
  118.                 data: result,
  119.               });
  120.             }
  121.           }
  122.         }
  123.       });
  124.     });
  125.   }
  126.  
  127.   @post(`FileUpload/finishChunkApi/{upload}/{model}/{type}`)
  128.   @response(200, {
  129.     description: 'FileUpload model instance',
  130.     content: { 'application/json': { schema: getModelSchemaRef(FileUpload) } },
  131.   })
  132.   async finishChunkApi(
  133.     @param.path.string('upload') upload: string,
  134.     @param.path.string('model') model: string,
  135.     @param.path.string('type') type: string,
  136.     @requestBody() pl: any,
  137.   ): Promise<any> {
  138.     let uploadId = pl.uploadId;
  139.     let key = pl.key;
  140.     let partList = pl.partList;
  141.     let pathurl = `/${upload}/${model}/${type}/${key}`;
  142.     const m_dir = `./public/${upload}/${model}/${type}/${uploadId}`;
  143.     const filePath = `./public/${upload}/${model}/${type}/${key}`;
  144.     // console.log(uploadId, key, partList, pathurl, " asdasd")
  145.     let self = this;
  146.     let size = 0;
  147.     function mergeFile(dirPath: string, filePath: string, partList: any) {
  148.       let total = partList.length;
  149.       return new Promise((resolve, reject) => {
  150.         fs.readdir(dirPath, (err: any, files: any) => {
  151.           if (err) {
  152.             return reject(err);
  153.           }
  154.           if (files.length !== total || !files.length) {
  155.             return reject('上传失败，切片数量不符');
  156.           }
  157.           function merge(i: number) {
  158.             // 合并完成
  159.             if (i === files.length) {
  160.               fs.rmdir(dirPath, (err: any) => {
  161.                 console.log(err, 'rmdir');
  162.               });
  163.               let date = new Date();
  164.               let m = {
  165.                 originalname: pl.filename,
  166.                 path: pathurl,
  167.                 timestamp: date,
  168.                 size: size,
  169.               };
  170.               return resolve({
  171.                 status: 0,
  172.                 data: {
  173.                   date: date,
  174.                   value: pathurl,
  175.                   url: pathurl,
  176.                 },
  177.               });
  178.             }
  179.             let chunkpath = `${dirPath}/${key}-${i + 1}`;
  180.             // console.log(chunkpath, 'chunkpath');
  181.             fs.readFile(chunkpath, 'binary', (err: any, data: any) => {
  182.               // console.log(data.length);
  183.               size += data.length;
  184.               let eTag = SparkMD5.hashBinary(data);
  185.               if (_.find(partList, { partNumber: i + 1 }).eTag !== eTag) {
  186.                 return reject('上传失败，切片内容不符');
  187.               }
  188.               // 将切片追加到存储文件
  189.               fs.appendFile(filePath, data, { encoding: 'binary' }, () => {
  190.                 // 删除切片文件
  191.                 fs.unlink(chunkpath, () => {
  192.                   // 递归合并
  193.                   merge(i + 1);
  194.                 });
  195.               });
  196.             });
  197.           }
  198.           merge(0);
  199.         });
  200.       });
  201.     }
  202.     try {
  203.       return await mergeFile(m_dir, filePath, partList);
  204.     } catch (err) {
  205.       fs.rmdir(m_dir, { recursive: true }, (err: any) => {
  206.         console.log(err);
  207.       }); //出错后重新上传
  208.       return {
  209.         status: -1,
  210.         msg: err,
  211.       };
  212.     }
  213.   }
  214. }
  215.

file-upload.sevice.ts：

  1. import {
  2.   BindingScope,
  3.   config,
  4.   ContextTags,
  5.   injectable,
  6.   Provider,
  7. } from '@loopback/core';
  8. import multer from 'multer';
  9. import {FILE_UPLOAD_SERVICE} from '../keys';
  10. import {FileUploadHandler} from '../types';
  11.  
  12. /**
  13.  * A provider to return an `Express` request handler from `multer` middleware
  14.  */
  15. @injectable({
  16.   scope: BindingScope.TRANSIENT,
  17.   tags: {[ContextTags.KEY]: FILE_UPLOAD_SERVICE},
  18. })
  19. export class FileUploadProvider implements Provider<FileUploadHandler> {
  20.   constructor(@config() private options: multer.Options = {}) {
  21.     if (!this.options.storage) {
  22.       // Default to in-memory storage
  23.       this.options.storage = multer.memoryStorage();
  24.     }
  25.   }
  26.  
  27.   value(): FileUploadHandler {
  28.     return multer(this.options).any();
  29.   }
  30. }

application.ts:

  1. import { BootMixin } from '@loopback/boot';
  2. import { ApplicationConfig } from '@loopback/core';
  3. import { RepositoryMixin } from '@loopback/repository';
  4. import { RestApplication, RestBindings } from '@loopback/rest';
  5. import { ServiceMixin } from '@loopback/service-proxy';
  6. import multer from 'multer';
  7. import path from 'path';
  8. import {  FILE_UPLOAD_SERVICE,  STORAGE_DIRECTORY } from './keys';
  9.  
  10. export class LbSmartApplication extends BootMixin(
  11.   ServiceMixin(RepositoryMixin(RestApplication)),
  12. ) {
  13.   constructor(options: ApplicationConfig = {}) {
  14.     super(options);
  15.  
  16.     //...省略
  17.  
  18.     this.configureFileUpload(options.fileStorageDirectory);
  19.   };
  20.  
  21.   /**
  22.    * Configure `multer` options for file upload
  23.    */
  24.   protected configureFileUpload(destination?: string) {
  25.     // Upload files to `dist/.sandbox` by default
  26.     destination = destination ?? path.join(__dirname, '../.sandbox');             
  27.     this.bind(STORAGE_DIRECTORY).to(destination);
  28.     const multerOptions: multer.Options = {
  29.       storage: multer.diskStorage({
  30.         destination,
  31.         // Use the original file name as is
  32.         filename: (req, file, cb) => {
  33.           file.originalname = Buffer.from(file.originalname, "latin1").toString( "utf8");
  34.           let originalname = file.originalname;
  35.           if (req.body && req.body.key && req.body.partNumber) {
  36.             originalname = `${req.body.key}-${req.body.partNumber}`;
  37.           }
  38.           cb(null, originalname);
  39.         },
  40.       }),
  41.     };
  42.     // Configure the file upload service with multer options
  43.     this.configure(FILE_UPLOAD_SERVICE).to(multerOptions);
  44.   }
  45. }

额外：加密算法介绍

在信息安全领域，经常会用到MD5、SHA1、SHA256算法。这三种算法都属于散列算法，或者叫作哈希算法。它们具有输入任意长度，输出长度固定，以及单向性（无法根据散列值还原出消息）的特点。

关于MD5

MD5是一个安全散列算法，输入两个不同的明文不会得到相同的输出值，根据输出值，不能得到原始的明文，即其过程是不可逆的。所以要解密MD5没有现成的算法，只能穷举法，把可能出现的明文，用MD5算法散列之后，把得到的散列值和原始的数据形成一个一对一的映射表，通过匹配从映射表中找出破解密码所对应的原始明文。

关于SHA1

SHA1是一种密码散列函数，可以生成一个被称为消息摘要的160位（20字节）散列值，散列值通常的呈现形式为40个十六进制数。该算法输入报文的长度不限，产生的输出是一个160位的报文摘要。输入是按512 位的分组进行处理的。SHA-1是不可逆的、防冲突，并具有良好的雪崩效应。

关于SHA256

sha256是一种密码散列函数，也可以说是哈希函数。对于任意长度的消息，SHA256都会产生一个256bit长度的散列值，称为消息摘要，可以用一个长度为64的十六进制字符串表示。sha256是SHA-2下细分出的一种算法。SHA-2下又可再分为六个不同的算法标准，包括了：SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256。

关于RSA

是典型的非对称加密算法（对称加密算法又称传统加密算法。 加密和解密使用同一个密钥），主要具有加密解密、数字签名和加签验签的功能。

加密解密：私钥解密，公钥加密。  数字签名-俗称加签验签：私钥加签，公钥验签。 

MD5、SHA1、SHA256有哪些区别？

相同点：

都是密码散列函数，加密不可逆；

都可以实现对任何长度对象加密，都不能防止碰撞；

不同点：

1、校验值的长度不同，MD5校验位的长度是16个字节（128位）；SHA1是20个字节（160位）；SHA256是32个字节（256位）。

2、运行速度不同，SHA256的运行速度最慢，然后是SHA1，最后是MD5。

MD5、SHA1、SHA256安全性如何？

  在安全性方面，SHA256的安全性最高，然后是SHA1，最后是MD5。虽然SHA256的安全性比较高，但是耗时要比其他两种多很多。

md5、SHA1、SHA256不能解密吗？

  SHA256是目前比较流行的计算机算法之一，相对md5和SHA1而言，SHA256很安全。SHA256是牢不可破的函数，它的256位密钥从未被泄露过。而MD5就不一样了，单纯使用比较容易遭到撞库攻击。通过预先计算知道MD5的对应关系，存在数据库中，然后使用的时候反查，MD5就可能被解密。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/650555
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号