js触发input的打开文件选择器，将本地图片回显以及上传

你可以通过以下 JavaScript 代码触发文件选择器：这里的场景不是通过input标签来触达的文件选择器，这样对于样式较为复杂的上传可以在html结构上保持清爽愉快，不用多添加一个input标签。

选择文件

示例demo，理解思路

// 创建一个input元素
var input = document.createElement('input');
// 设置input类型为file，表示文件选择器
input.type = 'file';
// 添加change事件监听器，当用户选择文件后触发
input.addEventListener('change', function (event) {// 获取选择的文件var selectedFile = event.target.files[0];// 在这里你可以处理选择的文件，比如读取内容或上传到服务器等console.log('选择的文件:', selectedFile);
});
// 触发文件选择器
input.click();

这里的file，可以将一切媒体的类型的文件可以上传，但是有些场景只是上传图片，如何通过简单的方法实现呢？

input.accept 是用于指定文件选择器接受的文件类型的属性。通过设置 accept 属性，你可以限制用户只能选择特定类型的文件。这在需要特定类型文件的应用场景中很有用，例如只允许选择图像文件或文档文件。

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>File Input Example</title>
</head>
<body><label for="fileInput">选择图像文件：</label><input type="file" id="fileInput" accept="image/*"><script>// 添加change事件监听器，当用户选择文件后触发document.getElementById('fileInput').addEventListener('change', function (event) {// 获取选择的文件var selectedFile = event.target.files[0];// 在这里你可以处理选择的文件，比如读取内容或上传到服务器等console.log('选择的文件:', selectedFile);});</script></body>
</html>

在上述示例中，文件选择器只允许选择图像文件，因为 accept 属性设置为 image/*。你可以根据需要更改 accept 属性的值来限制文件类型。

ok，那么这里的 accept 属性，我们只需要放在js代码中开始即可。例如只需要筛选图片，其实的文件被筛选掉。

const fileInput = document.createElement('input');  
fileInput.type = 'file';  
fileInput.accept = 'image/gif,image/jpeg,image/jpg,image/png'; 
fileInput.click(); //or 
fileInput.accept = 'image/*'
//但是大批量筛选会延时打开文件选择器弹窗的速度，所以只需要指定格式的即可

显示文件

在前端，input 标签的文件选择器在用户选择文件后会触发change事件。你可以通过监听这个事件来获取用户选择的文件。当用户在文件选择框中选择一个文件并确认选择时，change 事件将被触发。

fileInput.addEventListener("change",()=>{// console.dir(fileInput);const windowURL = window.URL || window.webkitURL; // 兼容操作let fileObj = fileInput.files[0];let url = windowURL.createObjectURL(fileObj);this.$refs['photo1'].src=url;//等待dom图片加载完毕，即可释放资源。this.$nextTick(()=>{URL.revokeObjectURL(url);})})},

上传

格式为表单上传。

// 上传图片封装axios函数
export const POST_ADDPIC = (data)=>{return http.post(API.ADDPIC,data,{headers: {'Content-Type': 'multipart/form-data'},});
}
//使用
const form = new FormData()
form.append('data', file);//let file = fileInput.files[0];
form.append('id',id);
POST_ADDPIC(form).then((res)=>{//TODO}).catch((err)=>{//TODO});