文件上传方式
Ajax做文件上传就会有兼容性的问题。只有一些高版本的浏览器可以实现文件上传的功能。Ie6 ie7 低版本浏览器不能实现。因为ajax文件上传用到Formdata,它是h5新增的，有兼容问题，低版本浏览器不支持。
数据往formdata中加：
调用formdata的append方法，用原生dom对象的file的第0个获取到上传的文件。发aiax请求，用post请求方式，添加属性。
原生ajax上传代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>data</p><input id='data' type="file" name="data" />
<p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
<input type="button" value="添加文件" id="btn" />
</body>
</html>
<script>
btn.onclick = function () {
// 前后端交互
var xhr = new XMLHttpRequest();
xhr.open("POST", "请求接口", true);// 把数据传过去，true：异步 false：同步
var formData = new FormData();
formData.append("type", input1.value);
formData.append("data", data.files[0]);
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var flag = xhr.responseText;//把响应拿回来
console.log(flag);
}
}
}
</script>
Jquery ajax上传代码
注意：在ajax发送请求时要加上以下三个属性：不加会报错
Cache:false
processData:false
contentType:false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>data</p><input id='data' type="file" name="data" />
<p>type</p><input id='input1' type="text" value='image/jpg' name="type" />
<input type="button" value="添加文件" id="btn" onclick="test();" />
</body>
</html>
<script>
function test() {
var formData = new FormData();
formData.append("type", input1.value);
formData.append("data", data.files[0]);
$.ajax({
url: "请求接口",
method: "POST",
cache: false, // 文件不设置缓存
data: formData,
processData: false, // 数据不被转换为字符串
contentType: false, // 上传文件时使用，避免 JQuery 对其操作
success: function (result) {
console.log(result);
}
})
}
</script>
axios上传代码
let formData = new FormData();
formData.append('type', input1.value);
formData.append('data', data.files[0]);
axios({
method: 'post',
url: "请求接口",
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}，
onUploadProgress: function (e) {
// 对原生进度事件的处理
console.log('上传进度计算',(e.loaded/e.total*100).toFixed(2)+'%')
}
})
.then(res => {
})
.catch(err => {
});
Axios上传阿里云
const res = await axios({
method: 'put',
url,
data: data.file,// 流文件
headers: {
'Content-Type':'application/octet-stream', // 设置特定的头部
}，
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (e) {
// 对原生进度事件的处理
console.log('上传进度计算',(e.loaded/e.total*100).toFixed(2)+'%')
}
})
console.log('上传结果1111',res)
在线演示：传送门
Base64转换成流
// ------------------将base64转换为blob----------------
let arr = data.content.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
let blob = new Blob([u8arr], { type: mime })
// ------------------将base64转换为blob----------------
// 向流文件中添加相关参数
blob.lastModifiedDate = new Date()
blob.name = data.file.name
let formData = new FormData()
formData.append('businessNo', '20191218OTHER217C10233')
formData.append('businessType', 'DEMO')
formData.append('systemType', "DEMO")
formData.append('uploadType', 'formfile')
formData.append('isNeedPub', '0')
formData.append('pubLimitTime', 43200)
formData.append('upload', theBlob, theBlob.name)
formData.append('data', blob, blob.name)
Vue项目中封装配置
/*----- http.js -----*/
upLoadFile(url, method, data, callback) {
return axios({
method: method,
url,
data,
headers: {
'Content-Type': 'multipart/form-data', // 设置特定的头部
},
onUploadProgress: function (e) {
// 对原生进度事件的处理 (e.loaded/e.total*100).toFixed(2)+'%'
let progress = (e.loaded / e.total * 100).toFixed(2)
callback && callback(progress, e)
}
})
}
/*------api.js-----*/
import http from '@/utils/http'
const URL = process.env.VUE_APP_BASE_LOCAL
export default {
// 名单导入
nameImportUpData (params, callback) {
return http.upLoadFile(URL + '/ImportController/importData', 'POST', params, callback)
}
}
<!-- template.vue -->
<template>
<section>
<el-button @click="uploadFile">一键导入</el-button>
</section>
</template>
<script>
import nameImport from '@/api/nameImport'
export default {
methods: {
uploadFile () {
const input = document.createElement('input')
input.style.display = 'none'
input.type = 'file'
input.accept = '.xls,.xlsx'
document.body.appendChild(input)
input.click()
input.onchange = () => {
const fileTypes = ['xls', 'xlsx']
const file = input.files[0]
const fileType = file.name.split('.')[1]
const flag = fileTypes.includes(fileType)
if (!flag) {
this.$message.error('请选择excel文件上传!')
return
}
const formData = new FormData()
formData.append('excelFile', file)
document.body.removeChild(input)
nameImport.nameImportUpData(formData, (progress) => {
console.log('进度', progress)
}).then((res) => {
console.log(res)
if (res && res.result === '0') {
this.$message.success('导入成功！')
} else {
this.$message.error(res.resultMessage)
}
})
}
}
}
}
</script>