文件上传
文件上传分为两类，一类是传到数据库，存到表里，第二就是上传到服务器，公司目前开发的功能用的是第一种，第二种是通用的方法。
文件上传到数据库
（因为公司使用的是webbuilder，所以在此只包括wb的方法，别的框架的暂时还没看到还没学会，后面再补）
通过Wb.upload方法上传文件，需要传的参数要有表单数据即form，在url指向的文件中调用如下方法：
其中content即为获取文件内容的blob字段，然后直接通过sql插入到表里
文件上传到服务器
FormData
项目中通常使用的文件格式就是FormData
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="file" class="upload_inp" onchange="changeFile()">
<!-- 限制上传文件类型也可以用accept属性 -->
<!-- <input type="file" class="upload_inp" accept=".png,.jpg,.jpeg"> -->
<!-- 如果样式不要默认的input框的话,比如上传照片头像这种,可以将input框隐藏,后面放一个div/img/button..,点击事件里触发input的点击事件即可 -->
<script>
// axios封装,统一请求头,请求路径等
let axiosInstance = axios.create();
axiosInstance.defaults.baseURL = 'http://127.0.0.1:8000' // 路径配置
axiosInstance.defaults.headers['Content-Type'] = 'multipart/form-data'; // 请求头设置,这里一定是formdata类型不能是application/x-www-form-urlencoded,只有form-data可以传文件
axiosInstance.defaults.transformRequest = (data, headers) => {
const contentType = headers['Content-Type'];
if (contentType === 'application/x-www-form-urlencoded') return Qs.stringify(data);
return data;
}
axiosInstance.interceptors.response.use(response => {
return response.data;
}, reason => {
return new Promise.reject(reason)
});
function changeFile() {
let upload_inp = document.querySelector('.upload_inp');
console.log(upload_inp.files);
let file = upload_inp.files[0];
// 上传到服务器
if (!file) {
alert('请选择上传的文件');
return;
}
// 限制上传文件的格式
if (!/(PNG|JPG|JPEG)/i.test(file.type)) {
alert('上传的文件只能是PNG|JPG|JPEG格式的');
return;
}
// 限制文件的上传大小
if (file.size > 2 * 1024 * 1024) {
alert('上传的文件不能超过2MB');
return;
}
// 判断之后开始上传操作
// 新建FormData类,并使用append方法加入file和filename等属性
let formData = new FormData();
formData.append('file', file);
formData.append('filename', file.name);
// xhr发送到后台(axios)/xxx是接口路径
axiosInstance.post('/xxx', formData).then(data => {
if (data.code === 200) {
alert('上传文件成功');
}
return new Promise.reject(data.codeText); // 如果服务器返回错误信息,则依旧走catch
}).catch(err => {
alert('上传文件失败，请重试')
}).finally(() => {
clearFileList();
})
}
</script>
</body>
</html>FileReader
FileReader 可以把 File 或 blob 对象转化为另一种格式（例如base64），转化为另一种格式后常用于图片预览和文件上传。
常见的四个方法：
readAsArrayBuffer(file)：读取文件或 Blob 作为数组缓冲区。常用于大文件上传。没研究明白...readAsDataURL(file)：这将返回一个 URL，它是 Base64 编码的，常用于小文件上传和图片预览。readAsBinaryString(file)：以二进制字符串读取文件，不常用。readAsText(file, format)：将文件读取为 USVString（几乎像一个字符串），并且可以指定可选格式。不常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.your-style {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
<body>
<!-- <input type="file" name="" id=""> -->
<div class="your-style" onclick="this.nextElementSibling.click()"></div>
<input type="file" multiple onchange="changeFile()" id="inputFile" style="display: none;" />
<img src="" id="uploadImg">
<!-- 只允许上传png格式的图片 -->
<!-- <input type="file" accept=".png" /> -->
<!-- <input type="file" accept="image/png" /> -->
<!-- 允许上传固定几种格式的图片 -->
<!-- <input type="file" accept=".png, .gif, .jpg" /> -->
<!-- <input type="file" accept="image/png, image/git, image/jpg" /> -->
<!-- 允许上传所有类型的图片 -->
<!-- <input type="file" accept="image/*" /> -->
<script>
function changeFile() {
let fileDom = document.getElementById('inputFile');
console.log(filedom.value);
if (filedom.value.indexOf('.txt') > 0) {
console.log('不支持上传txt格式的文件');
return false
}
console.log(filedom.files);
if (filedom.files[0].size > 1 * 1024 * 1024) {
console.log('文件大小不得超过1M');
return false
}
// 图片预览
// var imgdom = document.getElementById('uploadImg');
// let reader = new FileReader();
// console.log(reader);
// readAsDataURL可以直接转为base64格式
// reader.readAsDataURL(filedom.files[0]);
// reader.onload = (e) => {
// console.log(e);
// let img = new Image();
// img.src = e.target.result;
// img.onload = () => {
// console.log(img.width);
// console.log(img.height);
// }
// imgdom.src = e.target.result;
// console.log(imgdom);
// }
// 单文件
let file = fileDom.files[0];
let reader = new FileReader();
reader.readAsArrayBuffer(file);
let progressBar = document.getElementById('progressBar'); // 进度条（里面的div）
reader.onload = (e) => {
// 上面reader如果用的是readAsDataURL,那么可以这样调axios,这个是base64编码格式
// const base64URL = e.target.result;
// const fileRes = axios.post("/upload", { fileData: base64URL, fileName: file.name });
// fileRes.then((res) => {
// const img = new Image();
// img.alt = img.title = file.name;
// img.style.height = "150px";
// img.src = base64URL;
// document.body.appendChild(img);
// })
// 上面reader如果用的是readAsArrayBuffer,那么e.target.result是ArrayBuffer格式,具体这个格式和blob格式有什么区别是二进制的内容,暂时还不是很了解,只知道blob是不能改变的二进制文件,具体见下一篇转载
let form = new FormData();
form.append('file', e.target.result);
console.log(form.get("file"));
let xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象实例
xhr.open('post', '/url/upload'); // 设置http请求的方式和地址
xhr.onreadystatechange = function () { // 请求完成时的回调函数
if (xhr.status === 200) {
progressBar.style.width = '100%'; // 设置进度条宽度为100%，上传成功。
} else {
console.log('上传出错！');
}
};
xhr.upload.onprogress = function (e) { // 监听上传进度
if (event.lengthComputable) {
progressBar.style.width = e.loaded / e.total * 100 + '%';
// 修改进度条宽度百分比
// e.loaded 为当前已上传的大小，e.total为文件总大小。
}
};
xhr.send(form); // 执行上传
};
// 多文件
// let filelist = Array.from(filedom.files);
// filelist.forEach(i => {
// var reader = new FileReader();
// reader.readAsDataURL(i)
// reader.onload = (e => {
// console.log(e.target.result);
// e.target.result即为file的内容
// })
// })
}
</script>
</body>
</html>文件下载
文件下载方法很多
第一类：页面跳转、打开
location.href下载
<body>
<button onclick="download('urlxx')">下载</button>
<script>
function download(url) {
window.location.href = url;
}
</script>
</body>
window.open下载
<body>
<button onclick="download('urlxx')">下载</button>
<script>
function download(url) {
window.open(url, '_self');
/**
* _blank：在新窗口显示目标网页
* _self：在当前窗口显示目标网页
* _top：框架网页中在上部窗口中显示目标网页
/**
}
</script>
</body>
iframe.src下载
<script>
var downloadFileUrl = "http://localhost:3000",elemIF = document.createElement("iframe");
elemIF.src = downloadFileUrl;
elemIF.style.display = "none";
document.body.appendChild(elemIF);
</script>a[download].click()下载
<body>
<button onClick="download()">a标签下载</button>
<script>
function download(url = 'urlxx', fileName = '未知文件') {
const a = document.createElement('a');
a.style.display = 'none';
a.setAttribute('target', '_blank');
/*
* download的属性是HTML5新增的属性
* href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
* 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
* 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
*/
fileName && a.setAttribute('download', fileName);
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
</body>
第二类：ajax
也是借用前面的a标签下载
let axiosInstance = axios.create();
axiosInstance.defaults.baseURL = 'http://xxx/' // 路径配置
function changeFile() {
axiosInstance.get('/xx').then(data => {
let fileDom = document.getElementById('inputFile');
var imgdom = document.getElementById('uploadImg');
let file = fileDom.files[0];
uploadImg.src = URL.createObjectURL(file)
console.log(uploadImg.src);
const a = document.createElement('a');
a.href = URL.createObjectURL(file);
a.style.display = 'none';
a.download = 'xx文件';
document.appendChild('a');
a.click();
document.removeChild('a');
URL.revokeObjectURL(file);
}).catch(data => {
console.log('下载失败');
})
}
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
