我正在尝试为 Vue 公式文件输入实现文件大小验证。当文件大小大于 100mb 时应该抛出错误,并且文件大小大于 50mb 时会发出警告。我试图创建一个自定义上传器。自定义上传器有助于捕获并显示错误,但我无法弄清楚如何将表单验证上的“hasErrors”标志更改为 true。这是输入的控件:
<FormulateInput
type="file"
name="file"
label="inputFile"
multiple
element-class="mt-0"
class="mb-0"
/>
Custom uploader code:
export default async function uploadToBlobStorage(file, progress, error) {
if (file.size > 100 * 1024 * 1024) { // size greater than 100mb
error(`${file.name} size is greater than the allowed 100mb`)
} else {
try {
const containerClient = new ContainerClient(store.getters['project/assetUploadUrl']);
await containerClient.getBlockBlobClient(file.name).uploadData(file, {
onProgress: (progressStatus) => progress(progressPercent(progressStatus.loadedBytes, file.size))
});
return Promise.resolve({
file: file.name,
path: `${store.getters['project/uploadUuid']}/${file.name}`,
url: `${store.getters['project/containerUrl']}/${store.getters['project/uploadUuid']}/${file.name}?${store.getters['project/sasToken']}`,
name: file.name
});
} catch {
error(`Unable to upload ${file.name}`);
}
}
}