uppy實現斷點續傳
阿新 • • 發佈:2021-06-22
- 斷點續傳伺服器後臺介面:/FileUpload/Upload
- 前臺程式碼
<html> <head> <meta charset="utf-8"> <title>Uppy</title> <!-- 1. Add CSS to `<head>` --> <link href="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.css" rel="stylesheet"> </head> <body> <div id="uppy-dashboard-area"></div> <!-- 2. Add JS before the closing `</body>` --> <script src="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.js"></script> <script> var zhcn = { strings: { // When `inline: false`, used as the screen reader label for the button that closes the modal. closeModal: '關閉彈框', // Used as the screen reader label for the plus (+) button that shows the “Add more files” screen addMoreFiles: '新增更多檔案', // Used as the header for import panels, e.g., “Import from Google Drive”. importFrom: '從 %{name} 匯入', // When `inline: false`, used as the screen reader label for the dashboard modal. dashboardWindowTitle: 'Uppy Dashboard Window (Press escape to close)', // When `inline: true`, used as the screen reader label for the dashboard area. dashboardTitle: 'Uppy Dashboard', // Shown in the Informer when a link to a file was copied to the clipboard. copyLinkToClipboardSuccess: '連結已複製', // Used when a link cannot be copied automatically — the user has to select the text from the // input element below this string. copyLinkToClipboardFallback: '複製下面的連結', // Used as the hover title and screen reader label for buttons that copy a file link. copyLink: '複製連結', // Used as the hover title and screen reader label for file source icons, e.g., “File source: Dropbox”. fileSource: '檔案來源: %{name}', // Used as the label for buttons that accept and close panels (remote providers or metadata editor) done: '完成', // Used as the screen reader label for buttons that remove a file. removeFile: '移除檔案', // Used as the screen reader label for buttons that open the metadata editor panel for a file. editFile: '編輯檔案', // Shown in the panel header for the metadata editor. Rendered as “Editing image.png”. editing: '正在編輯 %{file}', // Text for a button shown on the file preview, used to edit file metadata edit: '編輯', // Used as the screen reader label for the button that saves metadata edits and returns to the // file list view. finishEditingFile: '結束編輯檔案', // Used as the label for the tab button that opens the system file selection dialog. myDevice: '我的裝置', // Shown in the main dashboard area when no files have been selected, and one or more // remote provider plugins are in use. %{browse} is replaced with a link that opens the system // file selection dialog. dropPasteImport: 'Drop files here, paste, %{browse} or import from', // Shown in the main dashboard area when no files have been selected, and no provider // plugins are in use. %{browse} is replaced with a link that opens the system // file selection dialog. dropPaste: '拖拽檔案到這裡 or %{browse}', // This string is clickable and opens the system file selection dialog. browse: '瀏覽本地檔案', // Used as the hover text and screen reader label for file progress indicators when // they have been fully uploaded. uploadComplete: '上傳完成', // Used as the hover text and screen reader label for the buttons to resume paused uploads. resumeUpload: '繼續', // Used as the hover text and screen reader label for the buttons to pause uploads. pauseUpload: '暫停', // Used as the hover text and screen reader label for the buttons to retry failed uploads. retryUpload: '重試', // Used in a title, how many files are currently selected xFilesSelected: { 0: '%{smart_count} 個檔案已選擇', 1: '%{smart_count} 個檔案已選擇' }, // uppy/status-bar strings: uploading: '上傳中...', complete: '完成' // ...etc } }; var uppy = Uppy.Core({ autoProceed: false, allowMultipleUploads: true, // 上傳完成之後,是否可繼續新增檔案上傳 restrictions: { maxFileSize: 1024 * 1024 * 1024 * 4, // 以位元組為單位,4G maxNumberOfFiles: 100, minNumberOfFiles: 1, allowedFileTypes: ['image/*', 'video/*', 'img/*','text/*','html/*','application/x-zip-compressed'] // mime型別(image/png)或者檔案字尾名(.jpg),zip檔案 } }) .use(Uppy.Dashboard, { id: 'Dashboard', metaFields: [ { id: 'name', name: 'Name', placeholder: 'file name' } ], target: '#uppy-dashboard-area', note: 'image and video only', inline: true, showLinkToFileUploadResult: true, showProgressDetails: true, hideUploadButton: false, hideRetryButton: false, hidePauseResumeButton: false, hideCancelButton: false, hideProgressAfterFinish: false, closeModalOnClickOutside: false, closeAfterFinish: false, disableStatusBar: false, disableInformer: false, disableThumbnailGenerator: false, disablePageScrollWhenModalOpen: true, animateOpenClose: true, proudlyDisplayPoweredByUppy: true, onRequestCloseModal: () => this.closeModal(), showSelectedFiles: true, locale: zhcn, browserBackButtonClose: false }) .use(Uppy.Tus, { endpoint: '/FileUpload/Upload' }) uppy.on('file-added', (file) => { uppy.setFileMeta(file) }) uppy.on('file-removed', (file) => { console.log('Removed file', file) }) uppy.on('upload-success', (file, response) => { }) uppy.on('complete', (result) => { console.log('Upload complete! We’ve uploaded these files:', result.successful) }) </script> </body> </html>