Question

在这里，我正在尝试获取所选图像的文件夹路径或文件路径（无论您叫什么名称），但无法执行，请任何人都可以帮助我解决这个问题，即如何获得/访问所选图像的文件路径。

<input id="custom-input" type="file" (change)="handleFiles($event)" multiple >

    handleFiles = function (fileInput: Event) {

    const files = Array.from(fileInput.target['files']);
    this.convertImageToBase64(files, []);
      }

请高度感谢您的帮助。预先感谢！

Answer 1

不能。出于安全原因，HTML输入元素实际上未返回文件路径。请查看the MDN Docs related to the file input element，以获取可用属性的完整列表。

这适用于在浏览器中运行的任何应用程序。但是，如果使用Electron打包和分发您的应用，则可以访问本地文件系统（以及其他与OS相关的API）。

Answer 2

html文件：

<div>
<input class="file-upload-input" type='file'  multiple accept="image/*" (change)="onFileChange($event)" />
<img className="align-self-center" width= '100%' src="{{ImageUrl}}" />
</div>

.ts文件：

public ImageUrl = "";
  public FileImage : any;

    onFileChange(event : any) {
         this.FileImage = event.target.files[0];
         var reader = new FileReader();
         reader.onload = (event:any) => {
           this.ImageUrl = event.target.result;   
        }
         reader.readAsDataURL(this.FileImage);
      }
    }

添加上述代码HTML和ts文件。那么您将获得本地路径的预览。在此处使用“ FileImage”

如何在Angular中获取选定的图像文件路径

2 个答案: