目标: 选择文件赋值到Input输入框不会带有下级目录文件
实现点击Button将文件名赋值到Input输入框
我自己遇到的问题
问题:
找个一个办法能够解决自定义组件选择文件夹的问题,当时我还想把字符串根据/切割为数组,根据 .xx判断然后删除 带.的一组或者多组
后来发现这种只对单层文件夹有用,如果是多层文件夹他还是会继续找下去
当时我使用的是Antd-Design的Upload组件坚挺的Change
第一种方法
使用electron
框架 | 介绍 |
---|---|
electron | Electron是使用JavaScript,HTML和CSS构建跨平台的桌面应用程序框架。 Electron兼容Mac、Windows和Linux,可以构建出三个平台的应用程序。 |
这种方法可以直接使用electron内置的API, 打开文件会话框,监听用户的上传以及取消,来赋值到Input的输入框,当然这也是最简单的一种办法,一般在不使用electron构建桌面应用端的公司是不会使用的。
解决:
解决方法:
electron ipcRenderer 模块
const { ipcRenderer } = window.require('electron')
其中第一个参数: canceled是用来监听操作者对于文件上传框的选择文件或者取消的
第二个参数: filePaths是你选中的文件组成的数组
它返回的格式是这样的: filePath: {canceled: false/true, filePath:['C:\\Desktop']}
'open-dialog'为《文件对话框》
const filePath = ipcRenderer.sendSync('open-dialog')
我的使用方法:
const { ipcRenderer } = window.require('electron')
const VLocation = ({
value = '', onChange, title, placeholder, show
}) => {
const changeValue = (val) => {
onChange(val)
}
const selectLocationChange = () => { // 主要看这个方法
const filePath = ipcRenderer.sendSync('open-dialog')
changeValue(filePath.filePaths[0])
}
return (
<VLocationContainer>
{ show && (
<Input
value={value}
className="select-localtion"
placeholder={placeholder}
disabled
allowClear
/>
) }
<Button onClick={() => selectLocationChange()}>{title}</Button>
</VLocationContainer>
)
}
这样赋值就完成了,此方法是最简单的,如果项目文件支持你这么使用的话
如果不支持你使用此方法的话,那请详看下面的方法~