1

我正在使用BlazorInputFile包在 Blazor 中上传文件。

问题

此代码不起作用。

<InputFile OnChange="OnFileUpload" accept="image/x-png,image/jpeg" title="Upload jpeg or png image" />

如何限制用户只能在 Blazor 中上传 jpeg 或 png？请让我知道是否需要更多的东西来支持这个问题。

4

2 回答 2

6

之前的版本中可能存在错误，但需要明确的是，InputFile组件有一个AdditionalAttributes字典，该字典捕获任何未指定的属性，然后将其直接放置到类型文件的输入上。

[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }

这意味着您可以传递它没有尝试处理的属性，但它们会到达正确的位置。

因此，您可以指定一个接受属性或一个类，就像常规输入标记一样。

<InputFile OnChange="OnFileChange" class="custom-file-input" accept=".csv,.xlsx" />

也可以看看：

使用 <input type="file"> 时限制文件格式？

于 2021-02-23T19:04:28.080 回答
2

我有一个史蒂夫桑德森 InputFile 的包装器，它有一个 AllowedExtensions 属性。这是事后过滤器，这意味着用户必须上传文件，然后您告诉他们不允许使用文件扩展名。做预上传的方式有完整的线程，至少很难说。

这是我上传后的方式：

Nuget：DataJuggler.Blazor.FileUpload

包含 Blazor 示例项目的完整源代码位于此处：

https://github.com/DataJuggler/BlazorFileUpload

这里总结了最相关的部分：

使用 DataJuggler.Blazor.FileUpload

<FileUpload CustomSuccessMessage="Your file uploaded successfully." 
    OnReset="OnReset" ResetButtonClassName="localbutton" ShowStatus="false"
    PartialGuidLength="10" MaxFileSize=@UploadLimit FilterByExtension="true" 
    ShowCustomButton="true"  ButtonText="Start" OnChange="OnFileUploaded"
    CustomButtonClassName="startbutton" ShowResetButton="false" 
    AppendPartialGuid="true" AllowedExtensions=".jpg;.png;"
    CustomExtensionMessage="Only .jpg and .png files are allowed." 
    InputFileClassName="customfileupload" Visible=false
    FileTooLargeMessage=@FileTooLargeMessage>
</FileUpload>

注意 AllowedExtensions 和 CustomExtensionMessage 的两个属性。

这是我处理 FileUploaded 的代码的相关部分：

// Create a new instance of a 'FileInfo' object.
FileInfo fileInfo = new FileInfo(file.Name);

// I don't know if it's even possible for an extension to be upper case
uploadedFileInfo.Extension = fileInfo.Extension.ToLower();

// if FilterByExtension is true and the AllowedExtensions text exists
if ((FilterByExtension) && (!String.IsNullOrWhiteSpace(AllowedExtensions)))
{
    // verify the extension exists
    if (!String.IsNullOrWhiteSpace(fileInfo.Extension))
    {
        // If the allowed extensions // fixed issue where uploading 
        abort = !AllowedExtensions.ToLower().Contains(fileInfo.Extension.ToLower());
    }
    else
    {
        // you must have an extension
        abort = true;
    }
}

也许这会给你一些想法。

如果您想查看使用它的实时站点，我几天前刚刚发布了这个： https : //pixeldatabase.net - Edit Images with BQL - Bitmap Query Language

于 2020-04-26T01:37:02.400 回答