window.showOpenFilePicker() Vue项目开发的时候正常，但是打包到服务器上后，提示window.showOpenFilePicker not a function
0
悬赏园豆：50
[已解决问题]
浏览: 1093次
解决于 2024-01-26 09:26
window.showOpenFilePicker()
Vue项目开发的时候正常，但是打包到服务器上后，提示window.showOpenFilePicker not a function
是因为node环境的问题吗？
为什么element-ui上传组件能放服务器上跑？它也能浏览本地文件
最佳答案
0
window.showOpenFilePicker 是Web API的一部分，用于从用户设备中选择文件。这个函数是在浏览器环境中提供的，而不是Node.js环境。所以，如果你在Node.js环境中运行代码，这个函数就不会被识别。
解决方法：
使用 <input id="inputFile" type="file" />
<!-- 自定义文件选择按钮 -->
<label for="inputFile" class="label-input-file">
<!-- 如果是文本，则显示文字 -->
<div v-if="isText">{{ btnText }}</div>
<!-- 如果是非文本，element-ui的icon名 -->
<i v-else :class="elementIcon" />
</label>
<input id="inputFile" type="file" :multiple="multiple" :accept="accept" @change="handleFileSelect">
其他回答(1)
0
window.showOpenFilePicker 是Web API的一部分，用于从用户设备中选择文件。这个函数是在浏览器环境中提供的，而不是Node.js环境。所以，如果你在Node.js环境中运行代码，这个函数就不会被识别。
如果在Vue项目中使用 window.showOpenFilePicker 并在浏览器中运行正常，但在服务器上打包后出现问题，一种可能的原因是打包后的代码被执行在一个没有浏览器 API 的环境中，比如Node.js环境。
确保你的代码是在浏览器环境中执行，而不是在Node.js环境中。如果你在服务器上运行代码，你可能需要检查你的部署环境，确保它支持运行在浏览器中的JavaScript代码。
如果你的Vue项目中有类似于使用 window.showOpenFilePicker 的代码，你可能需要通过条件语句或其他手段来确保它仅在浏览器环境中执行。例如：
javascript
Copy code
if (typeof window.showOpenFilePicker === 'function') {
// 在浏览器环境中执行
window.showOpenFilePicker();
} else {
// 在其他环境中给出提示或采取其他适当的措施
console.error('window.showOpenFilePicker is not supported in this environment.');
}
这样可以防止在非浏览器环境中调用不支持的函数。
收获园豆：50
window.showOpenFilePicker not a function 是浏览器 console 的？清缓存呢？无痕模式访问试试？
– 快乐的凡人721 1年前@快乐的凡人721: 我试试
– echo_lovely 1年前