cv战士福音，可以带走的浏览器上传文件的三种方案，直接落地。

我敢打五毛钱的赌。

前端工程化完善度越来越高，2022年前端大概会有30%的工作被更高级的工作代替。

以前花基础界面的，将不再存在。反之，复杂界面的工作将越来越重。

算法逻辑，底层架构经验，才是新时代不落伍的保证。

由于安全考虑，浏览器只允许用户在进行三个操作时，触发上传本地文件：

通过 input type="file" 选择本地文件

通过拖拽的方式把文件拖过来

在编辑框里面复制粘贴

利用input上传文件第一种是最常用的手段，通常会自定义一个按钮，然后在用户点击时触发被隐藏的input，因为type="file"的input不好改变样式。

代码语言：javascript代码运行次数：0运行复制但是我有更好的方法去触发，在代码中几乎没有用到过上面的写法。

标准答案是事件触发，直接在js里面完成相关事件，非常灵活。如果把多处配置，一点触发比作水桶腰（宽而臃肿），那么一处配置一处触发就像一个容易得到的婀娜多姿的美人。大多文章把这一段写的又长又臭，如果你觉得我够良心，给个赞吧。

代码语言：javascript代码运行次数：0运行复制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 ..

})其执行结果如下：

其中accept 指定可以上传的文件

如果你要指定图片，input.accept = 'image/*'即可。

其他文件如下，可直接看accept api

代码语言：javascript代码运行次数：0运行复制const input = document.createElement('input');

input.accept = 'audio/*' // 声频

input.accept = 'video/*' // 视频

input.accept = 'image/*,.pdf'// 图片和pdf参考：

前端本地文件操作与上传