Vue3 + Element-Plus + 阿里云文件上传

1、选择文件夹方法

• input type=file 元素想要上传文件夹需要添加各个浏览器对应的布尔属性。

<input type="file" webkitdirectory mozdirectory odirectory />

2、Chrome 浏览器查看 input type=file 元素上传的文件方法

3、上传文件

• 拖动上传文件

• 示例图片
  

• 示例代码

<template><div class="upload-p container"><el-icon size="82" color="#a8abb2"><UploadFilled /></el-icon></div>
</template><script setup lang="ts">
import { onMounted } from 'vue';
import axios from 'axios';
import { Session } from '/@/utils/storage';onMounted(() => {const div: any = document.querySelector('.container');/*** 拖拽事件* 上面拖拽元组的时候执行的方法* @param e*/div.ondragenter = (e: any) => {e.preventDefault(); // 阻止默认事件};/*** 元素在上面悬停事件* 上面元组悬停的时候不断地去执行* @param e*/div.ondragover = (e: any) => {e.preventDefault(); // 阻止默认事件};/*** 拖拽结束事件* 拖动到div上面放手的时候执行* @param e*/div.ondrop = (e: any) => {e.preventDefault(); // 阻止默认事件const items = e.dataTransfer.items; // 获取拖拽的文件console.log(items.length, 'items'); // 查看拖拽文件个数for (const item of items) {const entry = item.webkitGetAsEntry(); // 获取拖拽的文件Entry对象（句柄对象）// 判断拖的是文件夹还是文件if (entry.isDirectory) {// 拖的是文件件 - 继续读取文件夹里面的内容const render = entry.createReader(); // 创建一个读取器render.readEntries((entries: any) => {console.log(entries);});} else {// 文件entry.file((f: any) => {// formData 对象的介绍请往下看const formData = new FormData();formData.append('file', f);// import.meta.env.VITE_API_URL + '/admin/sys-file/upload' 后台接口地址，就是后台处理过的阿里云OSS地址axios.post(import.meta.env.VITE_API_URL + '/admin/sys-file/upload', formData, {headers: {'Content-Type': 'multipart/form-data',Authorization: 'Bearer ' + Session.getToken(),},}).then((res) => {console.log(res, 'res');});});}}};
});
</script><style lang="scss" scoped>
.upload-p {display: flex;justify-content: center;align-items: center;width: 100%;height: 300px;border-radius: 8px;border: 1px #eaeaea dashed;
}
</style>

4、FormData

FormData 是什么

• FormData 是 JavaScript 中用于构建表单数据对象的 API，它主要用于处理 enctype=“multipart/form-data” 类型的表单提交，即上传文件和数据。通过 FormData，开发者可以在客户端构建和发送表单数据，尤其是在没有使用传统的 HTML 表单提交时，允许开发者进行更多的自定义和控制。
• FormData 对象代表了一个表单的键值对集合，它可以包含多个字段，并且可以包含文件数据。FormData 通常用于通过 AJAX（XMLHttpRequest 或 Fetch）发送数据，避免页面刷新。

创建 FormData

• 可以通过两种方式创建FormData实例：
• 空表单数据：你可以通过 new FormData() 创建一个空的 FormData 对象，并手动填充数据。

// 创建一个空的 FormData 对象
const formData = new FormData

• 基于现有表单元素：你可以通过 new FormData(formElement) 直接传递一个 HTML 表单元素，FormData 会从表单中提取所有的表单字段。

// 基于现有表单元素创建 FormData
let formElement = document.querySelector('form')
let formData = new FormData(formElement )

FormData 常用方法

• FormData 提供了一些方法来操作表单数据
• append(name,value)：向 FormData 对象添加一个新的键值对。如果键名已存在，会在值后面追加。
• delete(name)：删除指定的键值对。
• get(name)：获取指定键的值。
• has(name)：检查指定键是否存在。
• set(name,value)：如果键已存在，会用新值替换原值。
• forEach(callback)：遍历 FormData 对象中的所有键值对。

FormData 的实际应用

• 1、提交表单数据和文件
• 使用 FormData 可以方便地提交表单数据以及文件。这在许多场景中都有广泛应用，例如上传用户头像、文件或其他数据。
• 示例代码如下：

<form id="myForm"><input type="text" name="username" /><input type="file" name="profilePic" /><button type="submit">提交</button>
</form>

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {event.preventDefault();let formData = new FormData(form);fetch('/submit', {method: 'POST',body: formData}).then(response => response.json()).then(data => console.log('成功', data)).catch(error => console.error('失败', error));
});

• 2、文件上传
• FormData 在文件上传场景中尤其有用。你可以使用== input[type=“file”]==获取文件，并通过 FormData 上传到服务器。
• 示例代码如下：

<form id="fileForm"><input type="file" id="fileInput" name="file" /><button type="submit">上传文件</button>
</form>

let form = document.getElementById('fileForm');
let fileInput = document.getElementById('fileInput');form.addEventListener('submit', function(event) {event.preventDefault();let formData = new FormData();formData.append('file', fileInput.files[0]);  // 将文件添加到 FormDatafetch('/upload', {method: 'POST',body: formData}).then(response => response.json()).then(data => console.log('文件上传成功', data)).catch(error => console.error('上传失败', error));
});

• 3、FormData的动态操作
• FormData 允许你动态地添加、删除、修改表单数据，这使得它在一些需要动态处理的场景中非常有用。例如，用户可以选择上传多个文件，或根据不同条件选择是否添加其他数据字段。
• 示例代码如下：

let formData = new FormData();
formData.append('name', '张三');
formData.append('age', 30);console.log(formData.get('name'));  // 输出 JohnformData.append('name', '李四');  // 添加新的 name 字段
console.log(formData.getAll('name'));  // 输出 ['张三', '李四']formData.delete('age');  // 删除 age 字段
console.log(formData.has('age'));  // 输出 false

• 4、与 FileReader 配合使用
• FormData 可以与 FileReader 配合使用，以实现文件上传前的预览功能。例如，用户选择了文件后，可以预览上传的图片。

<input type="file" id="imageInput" />
<img id="imagePreview" />

let input = document.getElementById('imageInput');
let preview = document.getElementById('imagePreview');input.addEventListener('change', function(event) {let file = event.target.files[0];let reader = new FileReader();reader.onload = function(e) {preview.src = e.target.result;};reader.readAsDataURL(file);
});

性能与注意事项

• 1、内存管理：FormData 对象不会持久化，它只在创建时存储数据。因此，一旦创建了 FormData 对象，你应该在适当的时候将其传递到服务器，避免占用不必要的内存。
• 2、跨浏览器支持：FormData 在现代浏览器中得到了很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但在旧版本的 IE 中不支持，需要适当考虑兼容性。
• 3、文件限制：使用 FormData 上传的文件会受到浏览器和服务器的限制，例如文件大小、上传时间等。对于大文件上传，可能需要分片上传（Chunked Upload）等策略。
• 4、安全性：确保在处理用户上传的文件时进行安全检查，避免服务器端受到恶意文件攻击。

总结

• FormData 提供了一种简洁且灵活的方式来处理表单数据，特别适用于文件上传场景。它与 AJAX 的结合使用，使得开发者可以在不重新加载页面的情况下提交数据。理解 FormData 的基本用法，掌握其动态操作方法，可以帮助你更好地处理复杂的表单提交需求。