4.3 KiB
@aomao/plugin-file
File plugin
Installation
$ yarn add @aomao/plugin-file
Add to engine
import Engine, {EngineInterface} from'@aomao/engine';
import File, {FileComponent, FileUploader} from'@aomao/plugin-file';
new Engine(...,{ plugins:[ File, FileUploader], cards:[ FileComponent ]})
FileUploader plug-in main functions: select files, upload files
File optional
onBeforeRender can modify the address when previewing nearby or downloading attachments
onBeforeRender?: (action:'download' |'preview', url: string) => string;
FileUploader optional
//Use configuration
new Engine(...,{
config:{
[FileUploader.pluginName]:{
//...Related configuration
}
}
})
File Upload
action: upload address, always use POST request
crossOrigin: Whether to cross-origin
withCredentials: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
headers: request header
contentType: File upload is uploaded in multipart/form-data; type by default
accept: Restrict the file types selected by the user's file selection box, default * all
limitSize: Limit the file size selected by the user. If the file size exceeds the limit, no upload will be requested. Default: 1024 * 1024 * 5 5M
multiple: false can only upload one file at a time, true defaults to a maximum of 100 files at a time. You can specify the specific number, but the file selection box cannot be limited, only the first number of uploads can be limited when uploading
data: POST these data together to the server when the file is uploaded
name: When file upload request, the name of the request parameter in FormData, the default is file
/**
* File upload address
*/
action:string
/**
* Whether cross-domain
*/
crossOrigin?: boolean;
/**
* https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials
*/
withCredentials?: boolean;
/**
* Request header
*/
headers?: {[key: string]: string} | (() => {[key: string]: string });
/**
* Data return type, default json
*/
type?:'*' |'json' |'xml' |'html' |'text' |'js';
/**
* The name of the FormData when the file is uploaded, the default is file
*/
name?: string
/**
* Additional data upload
*/
data?: {};
/**
* Request type, default multipart/form-data;
*/
contentType?:string
/**
* The format of file reception, default "*" all
*/
accept?: string | Array<string>;
/**
* File selection limit
*/
multiple?: boolean | number;
/**
* Upload size limit, default 1024 * 1024 * 5 is 5M
*/
limitSize?: number;
Analyze server response data
Will find by default
File address: response.url || response.data && response.data.url Preview address: response.preview || response.data && response.data.preview After the back-end conversion, you can preview some complex files, and return the address if available Download address: response.download || response.data && response.data.download The download address of the file, you can add permissions, time restrictions, etc., if you have one, you can return the address
result: true upload is successful, data is the file address. false upload failed, data is an error message
/**
* Parse the uploaded Respone and return result: whether it is successful or not, data: success: file address, failure: error message
*/
parse?: (
response: any,
) => {
result: boolean;
data: string;
};
Command
File plugin command
Insert a file
Parameter 1: File status uploading | done | error uploading, uploading completed, uploading error
Parameter 2: When the status is not error, the file is displayed, otherwise an error message is displayed
//'uploading' |'done' |'error'
engine.command.execute(
File.pluginName,
'done',
'File address',
'File name', //optional
'File size', //optional
'Preview address', //optional
'Download address', //optional
);
FileUploader plugin command
Pop up the file selection box and perform upload
Optional parameter 1: Pass in the file list, these files will be uploaded. Otherwise, the file selection box will pop up and upload it after selecting the file
//Method signature
async execute(files?: Array<File> | MouseEvent):void
//Excuting an order
engine.command.execute(FileUploader.pluginName);