Vue 美丽的文件上传部件
(工作出箱,包含存储)
开始.. 试试代码Pen
100% 无服务器文件上传部件
电源 字节比例
支持 : 图像裁剪、视频预览、文档预览、拖放等...
完整文档 二. 支助 无头 SDK 二. 支助 媒体处理 APIs 二. 支助 存储 二. 支助 光盘N
安装
通过国家预防机制安装:
npm install @bytescale/upload-widget-vue
或者通过YARN:
yarn add @bytescale/upload-widget-vue
或者通过一个 <script> 标签 :
<script src="https://js.bytescale.com/upload-widget-vue/v4"></script>
使用量
选项 1 : 文件上传按钮 - 试试代码Pen
使用 openUploadModal 帮助者 :
<template>
<button @click="uploadFile">Upload a file...</button>
</template>
<script lang="ts">
import { openUploadModal } from "@bytescale/upload-widget-vue";
import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
import type { PreventableEvent } from "@bytescale/upload-widget-vue";
// Full Configuration:
// https://www.bytescale.com/docs/upload-widget#configuration
const options: UploadWidgetConfig = {
apiKey: "free", // Get API keys from: www.bytescale.com
maxFileCount: 10
};
export default {
name: "App",
methods: {
uploadFile(event: PreventableEvent) {
openUploadModal({
event,
options,
onComplete: (files: UploadWidgetResult[]) => {
if (files.length === 0) {
alert("No files selected.");
} else {
alert(files.map(f => f.fileUrl).join("\n"));
}
}
})
}
}
};
</script>
备选2) - 试试代码Pen
使用 : UploadDropzone 组件 :
<template>
<UploadDropzone :options="options"
:on-complete="onFilesUploaded"
:on-update="onFileListChanged"
width="600px"
height="375px" />
</template>
<script lang="ts">
import { UploadDropzone } from "@bytescale/upload-widget-vue";
import type { UploadWidgetConfig, UploadWidgetResult, UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget";
// Full Configuration:
// https://www.bytescale.com/docs/upload-widget#configuration
const options: UploadWidgetConfig = {
apiKey: "free", // Get API keys from: www.bytescale.com
maxFileCount: 10,
showFinishButton: true
};
export default {
name: "App",
components: {
UploadDropzone
},
data() {
return {
options
};
},
methods: {
onFileListChanged({ uploadedFiles, pendingFiles, failedFiles }: UploadWidgetOnUpdateEvent) {
const uploadedFileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");
console.log(uploadedFileUrls);
},
onFilesUploaded(files: UploadWidgetResult[]) {
if (files.length === 0) {
alert("No files selected.");
} else {
alert(files.map(f => f.fileUrl).join("\n"));
}
}
}
};
</script>
降区的特殊行为 :
on-complete只有在showFinishButton = true(当用户点击"Finnish").
on-update必须在showFinishButton = false。 。 。 .默认值 :
showFinishButton = false
结果
召回者收到一个 Array<UploadWidgetResult>数字 :
{
fileUrl: "https://upcdn.io/FW25...", // URL to use when serving this file.
filePath: "/uploads/example.jpg", // File path (we recommend saving this to your database).
accountId: "FW251aX", // Bytescale account the file was uploaded to.
editedFile: undefined, // Edited file (for image crops). Same structure as below.
originalFile: {
fileUrl: "https://upcdn.io/FW25...", // Uploaded file URL.
filePath: "/uploads/example.jpg", // Uploaded file path (relative to your raw file directory).
accountId: "FW251aX", // Bytescale account the file was uploaded to.
originalFileName: "example.jpg", // Original file name from the user's machine.
file: { ... }, // Original DOM file object from the <input> element.
size: 12345, // File size in bytes.
lastModified: 1663410542397, // Epoch timestamp of when the file was uploaded or updated.
mime: "image/jpeg", // File MIME type.
metadata: {
... // User-provided JSON object.
},
tags: [
"tag1", // User-provided & auto-generated tags.
"tag2",
...
]
}
}
QQ 配置
所有配置都是可选的(除了 apiKey 字段,这是需要的).
const options = {
apiKey: "free", // Get API keys from: www.bytescale.com
locale: myCustomLocale, // EN_US by default. (See "Localization" section below.)
maxFileCount: 5, // Unlimited by default (or 1 if multi: false).
maxFileSizeBytes: 1024 ** 2, // Unlimited by default.
mimeTypes: ["image/*"], // Unrestricted by default. Supports * wildcard suffix.
multi: false, // False by default.
onInit: ({ // Exposes lifecycle methods for the component.
close, // Closes the widget when called.
reset, // Resets the widget when called.
updateConfig // Updates the widget's config by passing a new config
}) => {}, // object to the method's first parameter.
onUpdate: (event) => { // Called each time the Upload Widget's list of files change.
// event.pendingFiles // Array of files that are preprocessing, uploading, or awaiting user input.
// event.pendingFiles[0].progress // Factor (0 to 1).
// event.pendingFiles[0].status // "Preprocessing" | "Uploading" | "AwaitingUserInput"
// event.failedFiles // Array of files that failed to upload (due to network or validation reasons).
// event.uploadedFiles // Array of files that have been uploaded and not removed.
},
onPreUpload: async file => ({
errorMessage: "Uh oh!", // Displays this validation error to the user (if set).
transformedFile: file // Uploads 'transformedFile' instead of 'file' (if set).
}),
showFinishButton: true, // Show/hide the "finish" button in the widget.
showRemoveButton: true, // Show/hide the "remove" button next to each file.
styles: {
breakpoints: {
fullScreenWidth: 750, // Full-screen mode activates when the screen is at or below this width.
fullScreenHeight: 420 // Full-screen mode activates when the screen is at or below this height.
},
colors: {
primary: "#377dff", // Primary buttons & links
active: "#528fff", // Primary buttons & links (hover). Inferred if undefined.
error: "#d23f4d", // Error messages
shade100: "#333", // Standard text
shade200: "#7a7a7a", // Secondary button text
shade300: "#999", // Secondary button text (hover)
shade400: "#a5a6a8", // Welcome text
shade500: "#d3d3d3", // Modal close button
shade600: "#dddddd", // Border
shade700: "#f0f0f0", // Progress indicator background
shade800: "#f8f8f8", // File item background
shade900: "#fff" // Various (draggable crop buttons, etc.)
},
fontFamilies: {
base: "arial, sans-serif" // Base font family (comma-delimited).
},
fontSizes: {
base: 16 // Base font size (px).
}
},
path: { // Optional: a string (full file path) or object like so:
fileName: "Example.jpg", // Supports path variables (e.g. {ORIGINAL_FILE_EXT}).
folderPath: "/uploads" // Please refer to docs for all path variables.
},
metadata: {
hello: "world" // Arbitrary JSON metadata (saved against the file).
},
tags: ["profile_picture"], // Requires a Bytescale account.
editor: {
images: {
allowResizeOnMove: true, // True by default. If false, prevents cropper from resizing when moved.
preview: true, // True by default if cropping is enabled. Previews PDFs and videos too.
crop: true, // True by default.
cropFilePath: image => { // Choose the file path used for JSON image crop files.
const {filePath} = image // In: https://www.bytescale.com/docs/types/UploadedFile
return `${filePath}.crop` // Out: https://www.bytescale.com/docs/types/FilePathDefinition
},
cropRatio: 4 / 3, // Width / Height. Undefined enables freeform (default).
cropShape: "rect" // "rect" (default) or "circ".
}
},
}
* 本地化
默认是 EN 美国数字 :
const myCustomLocale = {
addAnotherFileBtn: "Add another file...",
addAnotherImageBtn: "Add another image...",
cancelBtn: "cancel",
cancelBtnClicked: "cancelled",
cancelPreviewBtn: "Cancel",
continueBtn: "Continue",
cropBtn: "Crop",
customValidationFailed: "Failed to validate file.",
doneBtn: "Done",
fileSizeLimitPrefix: "File size limit:",
finishBtn: "Finished",
finishBtnIcon: true,
imageCropNumberPrefix: "Image",
maxFilesReachedPrefix: "Maximum number of files:",
maxImagesReachedPrefix: "Maximum number of images:",
orDragDropFile: "...or drag and drop a file.",
orDragDropFileMulti: "...or drag and drop files.",
orDragDropImage: "...or drag and drop an image.",
orDragDropImageMulti: "...or drag and drop images.",
processingFile: "Processing file...",
removeBtn: "remove",
removeBtnClicked: "removed",
submitBtnError: "Error!",
submitBtnLoading: "Please wait...",
unsupportedFileType: "File type not supported.",
uploadFileBtn: "Upload a File",
uploadFileMultiBtn: "Upload Files",
uploadImageBtn: "Upload an Image",
uploadImageMultiBtn: "Upload Images",
xOfY: "of"
}
API 支持
XQ 文件管理 APIs
字节尺提供了广泛的 文件管理 API数字 :
* 媒体处理API(图像/视频/音频)
字节比例还提供实时 媒体处理 APIs数字 :
- 图像处理 API (单位:千美元)调整大小, (中文(简体) ), 作物, (中文(简体) ), 转换, (中文(简体) ), 压缩 打开 水印(中文(简体) )
- 视频处理 API (单位:千美元)转码, (中文(简体) ), 优化, (中文(简体) ), 调整大小 打开 提取元数据(中文(简体) )
- 音频处理 API (单位:千美元)转码, (中文(简体) ), 优化, (中文(简体) ), 修饰 打开 提取元数据(中文(简体) )
图像处理 API( 原始图像)
举个例子 一张芝加哥的照片数字 :
https://upcdn.io/W142hJk/raw/example/city-landscape.jpg
图像处理 API (已转换的图像)
https://upcdn.io/W142hJk/image/example/city-landscape.jpg
?w=900
&h=600
&fit=crop
&f=webp
&q=80
&blur=4
&text=WATERMARK
&layer-opacity=80
&blend=overlay
&layer-rotate=315
&font-size=100
&padding=10
&font-weight=900
&color=ffffff
&repeat=true
&text=Chicago
&gravity=bottom
&padding-x=50
&padding-bottom=20
&font=/example/fonts/Lobster.ttf
&color=ffe400
认证
字节尺度支持两种认证类型:
API 密钥
字节级上传部件使用 apiKey 要认证的参数 字节比例。 。 。 .
使用 API 密钥 认证,请求者可以访问 API 密钥可用的资源 :
-
密钥 API (
secret_***)可以执行所有API操作(参见: 字节大小 JavaScript SDK) (中文(简体) ). -
公共 API 密钥( R)
public_***)只能执行文件上传和文件下载. 文件覆盖,文件删除,所有其他破坏性操作都无法使用公共 API 密钥进行.
你总是要用 公共 API 密钥 (例如:. public_***在你的客户端代码.
每个API密钥的读取/写取权限可以限制在文件/文件夹的子集.
日本西北地区
JWT是可选的.
使用 JWT , 用户可以通过 URL 直接下载私有文件, 因为认证是通过会话 cookie 默认进行的 或者说 通过一个 authorization 如果启用了服务员,则页眉(见 serviceWorkerScript 目标 AuthManager.beginAuthSession 页:1 这允许浏览器在 <img>, (中文(简体) ), <video>和其他因素.
通过JWT,用户可以将文件上传到每个用户的文件夹. 这是因为允许在 JWT的有效载荷 可以在运行时生成。 这个 位元尺度上传部件 内部使用 字节大小 JavaScript SDK 执行文件上传:字节标的JavaScript SDK用您的 API 处理 JWT 刷新进程,在需要时请求新的 JWT ,并将您的 JWT 包含在以后对 Bytescale API 的所有请求中.
乌尔比尔
这个 字节大小 JavaScript SDK 出口a UrlBuilder 来构建 URL filePaths数字 :
import { UrlBuilder } from "@bytescale/sdk";
建议: 你应该永远保存 filePaths 转到您的 DB 而不是 fileUrls。 。 。 .
原始文件
获取上传图像的 URL /example.jpg 原文如下:
// Returns: "https://upcdn.io/1234abc/raw/example.jpg"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.jpg"
});
图像
调整上传图像的大小 /example.jpg 至 800x600,使用下列方法:
// Returns: "https://upcdn.io/1234abc/image/example.jpg?w=800&h=600"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.jpg",
options: {
transformation: "image",
transformationParams: {
w: 800,
h: 600
}
}
});
视频
要将上传的视频转码 /example.mov 改为 HD 中的 MP4/H.264,使用下列方法:
// Returns: "https://upcdn.io/1234abc/video/example.mov?f=mp4-h264&h=1080"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.mov",
options: {
transformation: "video",
transformationParams: {
f: "mp4-h264",
h: 1080
}
}
});
音频
要将上传的音频编码 /example.wav 至192kbps的AAC,使用下列方法:
// Returns: "https://upcdn.io/1234abc/audio/example.wav?f=aac&br=192"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.wav",
options: {
transformation: "audio",
transformationParams: {
f: "aac",
br: 192
}
}
});
档案
要提取文件 document.docx 从上传的 ZIP 文件 /example.zip数字 :
// Returns: "https://upcdn.io/1234abc/archive/example.zip?m=extract&artifact=/document.docx"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.zip",
options: {
transformation: "archive",
transformationParams: {
m: "extract"
},
artifact: "/document.docx"
}
});
抗病毒药
要扫描文件 example.zip 用于病毒,使用下列方法:
// Returns: "https://upcdn.io/1234abc/antivirus/example.zip"
UrlBuilder.url({
accountId: "1234abc",
filePath: "/example.zip",
options: {
transformation: "antivirus"
}
});
我能用自己的存储器吗?
字节级支持AWS S3, Cloudflare R2, Google 存储器, DigitalOcean, 和字节级存储器.
QQ 创建您的字节比例账户
字节尺度是上传,转换,并服务图像,视频,音频规模的最佳方式.
完整文档
- 字节缩放上传部件 Docs
- 字节比例 上传部件( 反应) Docs
- 字节比例 上传元件( 角度) Docs \\
- 字节级上传元件( Vue.js) 医生
- 字节比例 上传元件 (jQuery) Docs {}