文件上传
要点 1:
- 示例一个 FormData() 对象.
要点 2:
- 将上传时获取到的 file 文件 append 到 formdata 对象中.
要点 3:
- 配置上传接口的 请求头.
方式一:表单提交文件(原生)
<el-button @click="getFile" style="margin-top: 10px">
<i class="el-icon-upload"></i> {{$i18n.t('CLICK_UPLOAD')}}
</el-button>
<input
type="file"
ref="file"
style="display: none;"
v-on:change="handleFileUpload($event)"
/>
获取 file 文件
let formData = new FormData();
let file = this.$refs.file.files[0];
formData.append(file, file);
// 调用接口
postUpload(formData).then(() => {});
上传接口配置请求头
// 文件上传
export function postUpload(file) {
return axios({
url: "upload",
method: "post",
data: file,
headers: {
"Content-Type": "multipart/form-data",
},
});
}
方式二: Elementui 封装的组件提交文件(vue)
注意: 上传接口需要配置请求头
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:http-request="onUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
// 上传文件
onUpload (file) {
let formData = new FormData()
formData.append('file',file.file)
postUpload(formData).then((res) => {
console.log(res)
this.$message.success(this.$t('UPLOAD_SUCCESS'))
}).catch((e) => {
this.$message.error(e.message)
})
},
多个文件一次请求上传 (手动调用文件上传接口)
- 获取 on-change 事件的第二个参数 fileList. (获取到所有需要上传的文件)
- 手动点击按钮触发 submit 方法 (写一个提交&上传按钮,手动触发/调用文件上传接口)
- 创建 FormData 对象,遍历 fileList 数组,将文件对象添加到 formData 中 (将文件对象添加到 formData 中)
- 调用 上传接口
<template>
<div class="uploadFiles">
<el-upload
class="upload-demo"
action="#fake"
:on-change="handleChange"
multiple
:limit="limitNum"
:http-request="onUpload"
:file-list="fileList"
>
<el-button size="small" type="primary">选取文件</el-button>
<span style="margin-left: 10px; vertical-align: bottom"
>已选中{{ this.requestFileList.length }}个文件</span
>
</el-upload>
<el-button size="small" type="primary" @click="issueHistoryTableUploadFn"
>确认上传</el-button
>
</div>
</template>
<script>
import API from "@/utils/API"; // 此处为请求的封装方法,没有引用可以忽略
export default {
data() {
return {
fileList: [], // 定义一个空数组
requestFileList: [],
};
},
methods: {
// 文件上传 change 事件,获取到所有需要上传的文件
handleChange(file, fileList) {
this.requestFileList = fileList;
},
// 确认上传按钮触发的事件
issueHistoryTableUploadFn() {
this.fileUploadLoading = true;
// 关键代码
let formData = new FormData();
this.requestFileList.forEach((file) => {
formData.append("files", file.raw);
});
// 调用上传接口
API.postUpload(formData)
.then((res) => {
this.$message.success("上传成功");
})
.catch(() => {
this.$message.warning("上传失败");
});
},
},
};
</script>
javascript 实现文件上传的相关知识
文件上传相关知识点:
- input 添加 type=‘file’ 属性即可选取电脑本地的文件。
- input 添加 multiple 可以实现
多文件上传
- input 添加 webkitdirectory mozdirectory odirectory 这些属性可以实现
文件夹上传
拖拽上传相关知识点
- 相关监听事件
- div.ondragenter = ()=>{}
- div.ondragtop = ()=>{}
- div.ondraop = ()=>{}
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.upload-area {
width: 100%;
height: 300px;
border: 1px solid tomato;
border-radius: 30px;
}
</style>
</head>
<body>
<input type="file" multiple />
<!-- 拖拽上传 -->
<div class="upload-area"></div>
<script>
const uploadArea = document.querySelector(".upload-area");
/*
默认情况下,div是不支持 文件拖拽到元素上.所以需要组织默认行为.
*/
uploadArea.ondragenter = (e) => {
// 当有文件被拖拽进入div元素时,就会触发该事件
e.preventDefault();
};
uploadArea.ondragover = (e) => {
// 只要有文件一直在div元素上,就会一直触发该事件
e.preventDefault();
};
uploadArea.ondrop = (e) => {
// 当文件在上传区域 松开鼠标时,触发该事件.
e.preventDefault();
// e.dataTransfer.items 可以得到拖拽进 上传区域了多少个文件.
for (const item of e.dataTransfer.items) {
// 调用 webkitGetAsEntry() 方法 获取拖拽进上传区域文件的相关属性
let FileEntry = item.webkitGetAsEntry();
fileRecursion(FileEntry);
}
// console.log(e.dataTransfer.items)
};
// 使用递归 循环遍历
function fileRecursion(FileEntry) {
if (FileEntry.isDirectory) {
// 目录
const reader = FileEntry.createReader();
reader.readEntries((directoryEntry) => {
directoryEntry.map((fileEntry) => fileRecursion(fileEntry));
});
} else {
// 文件
FileEntry.file((t) => {
console.log("file对象", t);
});
}
}
</script>
</body>
</html>