最新更新时间：2019年05月25日20:20:34
《猛戳-查看我的博客地图-总有你意想不到的惊喜》
本文内容：input标签实现文件上传，FormData对象实现文件上传
实现代码
.courseSaleInfoUpload
{
width
:50px
;
height
: 50px
;
position
: absolute
;
top
: 50%;
left
: 50%;
transform
: translate(-50%,-50%);
opacity
: 0;
cursor
: pointer
;
}
<input
className
={styles
.courseSaleInfoUpload
}
type
='file'
accept
="image/*"
onChange
={(e
)=>{this.uploadFileChange(e
)}}
/>
beforeUpload = (file
) => {
const isIMG
= ['image/jpeg','image/jpeg','image/png'].indexOf(file
.type
) != -1;
if (!isIMG
) {
message
.error('只能上传jpg、jpeg、png类型的图片');
}
const isLt2M
= file
.size
/ 1024 / 1024 < 2;
if (!isLt2M
) {
message
.error('图片大小不能超过2MB!');
}
return isIMG
&& isLt2M
;
}
uploadFileChange(e
){
let file
= e
.currentTarget
.files
[0];
if(!this.beforeUpload(file
)){
return
}
uploadFile(file
).then((res
)=>{
console
.log(res
);
if(res
.code
== 100){
//文件上传成功
}else{
message
.destroy()
message
.error('上传失败，请重新上传');
}
})
};
//post方法
function uploadFile(file
) {
return new Promise((resolve
,reject
)=>{
let url
= 'http://10.201.16.82:8100/cadet/file/uploadFile'
let formData
= new FormData
//post 接口需要的其他参数
formData
.append('params1', '')
formData
.append('params2', '')
//文件数据
formData
.append('file', file
)
let xhr
= null
if(window
.XMLHttpRequest
){
xhr
= new XMLHttpRequest()
}else{
xhr
= new ActiveXObject("Microsoft.XMLHTTP");
}
xhr
.onload = function () {
let data
= JSON.parse(xhr
.responseText
)
resolve(data
)
}
xhr
.onerror = function () {
console
.log('fail')
reject('error')
}
xhr
.open('post', url
, true)//async ture
-异步
false-同步
xhr
.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr
.send(formData
)
})
}
//post方法
function uploadFile(file
) {
return new Promise((resolve
,reject
)=>{
let url
= 'http://10.201.16.82:8100/cadet/file/uploadFile'
let formData
= new FormData
//post 接口需要的其他参数
formData
.append('params1', '')
formData
.append('params2', '')
//文件数据
formData
.append('file', file
)
let xhr
= new XMLHttpRequest()
xhr
.open('post', url
, true)
xhr
.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr
.onreadystatechange = function() {
//readyState
0-请求未初始化
1-服务器连接已建立
2-请求已接收
3-请求处理中
4-请求已完成，且响应已就绪（下载操作已完成）
if (xhr
.readyState
== 4 && (xhr
.status
== 200 || xhr
.status
== 304)) {
let data
= JSON.parse(xhr
.responseText
)
resolve(data
)
}
};
xhr
.send(formData
)
})
}
//扩展
get方法原生实现
var xhr
= new XMLHttpRequest();
xhr
.open('GET', 'http://10.201.16.82:8100/cadet/file/uploadFile?a=1&b=2', true);
xhr
.onreadystatechange = function() {
if (xhr
.readyState
== 4 && xhr
.status
== 200 || xhr
.status
== 304) {
}
};
xhr
.send();
todo
多文件上传 form原理 后端实现原理 进度显示
参考资料
FormData.append()
FormData()
form - HTML
XMLHttpRequest上传文件实现进度条
感谢阅读，欢迎评论^-^
打赏我吧^-^
