0

我正在尝试为 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}`);
    }
  }
}

4

0 回答 0