Electron：获取上传文件的完整路径

Question

我现在正在使用 Electron 构建 GUI。（就像桌面应用程序的 PhoneGap）

有没有办法启用签入文件的完整路径

<input type="file">

？
现在已安装

C:\fakepath\dataset.zip

。（目录名不是“fakepath”，但那是

document.getElementById("myFile").value

的值）

或者，还有其他方法来选择文件吗？

Answer 1

Electron 为 File

 对象添加了

path 属性，因此您可以使用以下方法从输入元素获取真实路径：

document.getElementById("myFile").files[0].path

Answer 2

出于安全原因，根据此答案，不可能执行您正在尝试的操作如何使用 javascript、jquery-ajax 在更改时获取所选文件的完整路径？.

但是，您可以像我在我从事的电子项目中所做的那样进行变通。

然后在
渲染器进程中为您之前创建的按钮创建一个事件侦听器。
const ipc = require('electron').ipcRenderer; const buttonCreated = document.getElementById('button-created-id'); buttonCreated.addEventListener('click', function (event) { ipc.send('open-file-dialog-for-file') });
然后在
主进程中，使用showOpenDialog
```
选择文件，然后将
```
full path
```
发送回渲染器进程。
```
ipc.on('open-file-dialog-for-file', function (event) { if(os.platform() === 'linux' || os.platform() === 'win32'){ dialog.showOpenDialog({ properties: ['openFile'] }, function (files) { if (files) event.sender.send('selected-file', files[0]); }); } else { dialog.showOpenDialog({ properties: ['openFile', 'openDirectory'] }, function (files) { if (files) event.sender.send('selected-file', files[0]); }); }});
然后在
渲染器进程中你会得到full path
```
。
```
ipc.on('selected-file', function (event, path) { console.log('Full path: ', path); });

因此您可以具有与输入类型文件类似的行为并获取完整路径。

Answer 3

<script>

    const electron = require('electron');
    const { ipcRenderer } = electron;
    const ko = require('knockout')
    const fs = require('fs');
    const request = require('request-promise');

    // replace with your own paths
    var zipFilePath = 'C:/Users/malco/AppData/Roaming/Wimpsdata/Wimpsdata.zip';
    var uploadUri = 'http://localhost:59887/api/Collector/Upload'

    var request = require('request');
    request.post({
        headers: { 'content-type': 'application/zip' },
        url: uploadUri,
        body: fs.createReadStream(zipFilePath)
    }, function (error, response, body) {
        console.log(body);
        location.href = 'ScanResults.html';
    });
</script>

ASP .NET WebAPI 控制器

using System;
using System.Collections.Generic;
using System.Configuration;
using System.IO;
using System.IO.Compression;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;
using Wimps.Services.Business;

namespace Wimps.Services.Controllers
{
    public class CollectorController : ApiController
    {

        public async Task<bool> Upload()
        {
            try
            {
                var fileuploadPath = ConfigurationManager.AppSettings["FileUploadLocation"];

                var provider = new MultipartFormDataStreamProvider(fileuploadPath);
                var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true));
                foreach (var header in Request.Content.Headers)
                {
                    content.Headers.TryAddWithoutValidation(header.Key, header.Value);
                }

                Byte[] byteArray = await content.ReadAsByteArrayAsync();

                string newFileName = Guid.NewGuid().ToString();
                string newFilePath = fileuploadPath + "\\" + newFileName + ".zip";
                if (File.Exists(newFilePath))
                {
                    File.Delete(newFilePath);
                }

                File.WriteAllBytes(newFilePath, byteArray);

                string unzipTo = fileuploadPath + "\\" + newFileName;
                Directory.CreateDirectory(unzipTo);

                DirectoryInfo di = new DirectoryInfo(unzipTo);
                foreach (FileInfo file in di.GetFiles())
                {
                    file.Delete();
                }

                ZipFile.ExtractToDirectory(newFilePath, unzipTo);



                return true;
            }
            catch (Exception e)
            {
                // handle exception here
                return false;
            }
        }
    }
}

需要在网络配置中添加密钥才能上传文件

<configuration>
  <appSettings>
... other keys here
    <add key="FileUploadLocation" value="C:\Temp\Uploads" />
  </appSettings>

应用程序配置的其余部分 ... ...

Answer 4

接受的答案对于最初的问题非常有用，但@Piero-Divasto 的答案更适合我的目的。

我需要的是一个

目录的路径名，它可能相当大。使用接受的答案，这可能会在处理目录内容时阻止主进程几秒钟。使用 dialog.showOpenDialog(...)

 可以让我获得近乎即时的响应。唯一的区别是

dialog.showOpenDialog

 不再接受回调函数，而是返回一个 Promise：

ipcMain.on("open-file-dialog-for-dir", async event => {
  const dir = await dialog.showOpenDialog({ properties: ["openDirectory"] });
  if (dir) {
    event.sender.send("selected-dir", dir.filePaths[0]);
  }
});

Answer 5

<script>const electron = require('electron');</script>
<button id="myFile" onclick="this.value=electron.remote.dialog.showOpenDialog()[0]">UpdateFile</button>

现在，

document.getElementById("myFile").value

将包含所选文件的完整路径。

Answer 6

Vadim Macagon 的回答：

let { path } = document.getElementById("myFile").files[0]

由于截至此答案，TypeScript 没有包含此接口，因此要使用此接口，您必须将文件转换为另一种类型

let { path } = document.getElementById("myFile").files[0] as any

或者，如果您不想使用

any

interface ElectronFile extends File {
    path: string;
}

let { path } = document.getElementById("myFile").files[0] as ElectronFile

Answer 7

//main process

    ipcMain.handle('select-file', async () => {
        const { canceled, filePaths } = await dialog.showOpenDialog( mainWindow, {
            properties: ['openFile'],
            title: 'Select your video file',
            filters: [
                { name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }
            ]
        });
        return canceled ? null : filePaths[0];
    });

//renderer process

    uploadSection.addEventListener('click', async () => {
        const filePath = await ipcRenderer.invoke('select-file');
        if (filePath) {
            console.log('Arquivo selecionado:', filePath);
        }
    })

assim 可以通过文件浏览器进行计算机、选择阿尔基沃和阿基沃的绝对道路， porem eu queria sabre se 存在类似 para arquivos dropados sobre a drop zone 的算法，que nao abram o 文件浏览器

Electron：获取上传文件的完整路径

问题描述投票：0回答：7

7个回答

最新问题

Electron：获取上传文件的完整路径

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7