浏览器上传文件的三种路径
cv战士福音，可以带走的浏览器上传文件的三种方案，直接落地。
我敢打五毛钱的赌。 前端工程化完善度越来越高，2022年前端大概会有30%的工作被更高级的工作代替。 以前花基础界面的，将不再存在。反之，复杂界面的工作将越来越重。 算法逻辑，底层架构经验，才是新时代不落伍的保证。
由于安全考虑，浏览器只允许用户在进行三个操作时，触发上传本地文件：
- 通过
input type="file"选择本地文件 - 通过拖拽的方式把文件拖过来
- 在编辑框里面复制粘贴
利用input上传文件
第一种是最常用的手段，通常会自定义一个按钮，然后在用户点击时触发被隐藏的input，因为type="file"的input不好改变样式。
<input type="file" id="file-input" name="fileContent">但是我有更好的方法去触发，在代码中几乎没有用到过上面的写法。
标准答案是事件触发，直接在js里面完成相关事件，非常灵活。如果把多处配置，一点触发比作水桶腰（宽而臃肿），那么一处配置一处触发就像一个容易得到的婀娜多姿的美人。大多文章把这一段写的又长又臭，如果你觉得我够良心，给个赞吧。
function insertFile(callback) {
const input = document.createElement('input');
input.type = 'file';
// input.accept = '.rmf,.km,.txt,.md';
input.addEventListener('change', (event: any) => {
const file = event.target.files[0];
// file 解析： https://developer.mozilla.org/zh-CN/docs/Web/API/File
if (event.target.files[0].size > 10 * 1024 * 1024) {
message.error('文件不能大于10mb');
return;
}
const file_name = file.name;
const file_reader = new FileReader();
file_reader.onload = event => {
const str = event.target.result;
console.log('filePlugins insertFile 弹出窗口，触发上传 str', event, file_name);
callback(str)
};
file_reader.readAsDataURL(file);
});
input.click();
}
insertFile(function (str){
// TODO ..
})其执行结果如下：
image.png
其中accept 指定可以上传的文件
如果你要指定图片，input.accept = 'image/*'即可。
其他文件如下，可直接看accept api
const input = document.createElement('input');
input.accept = 'audio/*' // 声频
input.accept = 'video/*' // 视频
input.accept = 'image/*,.pdf'// 图片和pdf参考：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
