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

【问题标题】：How to get selected images file path in Angular如何在Angular中获取选定的图像文件路径
【发布时间】：2019-09-24 19:30:33
【问题描述】：

在这里，我正在尝试获取选定的图像文件夹路径或文件路径（无论你怎么称呼它）但无法做到，请任何人都可以帮助我解决这个问题，我如何获取 /access 文件路径以及选定的图像。

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

    handleFiles = function (fileInput: Event) {

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

非常感谢您的帮助。提前致谢！

【问题讨论】：

也许这个问题会对你有所帮助stackoverflow.com/questions/50482814/…
感谢您的回复，但我的问题与提供的链接略有不同，我不想在上传之前预览，只想获取选定的图像文件路径。

标签： angular filepath

【解决方案1】：

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

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

【讨论】：

好的，但是有什么办法可以做到这一点，因为我们在服务器站点上有返回图像路径的 api，所以我该怎么做，到目前为止，我们正在将此 api 用于移动应用程序，所以我只是想用同一个api上传多张图片，
我想我得改一下这个api了。
到目前为止，我还没有使用我用来上传单个图像 api 的这个 api，但它没有显示图像路径
恐怕我无法就如何处理您的内部 API 提供一些建议。
如果我的英语令人困惑，我很抱歉：我无法帮助您，您使用的是内部 API。

【解决方案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”文件

【讨论】：