关于用element UI 的upload上传文件时的一些问题总结
1. 前提:作为前端文件上传的前提就是后端将接口给到你,同时后端应该解决跨域的问题(ps:跨域的问题是前后端都存在的,使用浏览器的话就会有跨域的问题,尤其是现在前后端分离的情况下,调试的时候会有跨域的问题的)。其次就是你们要确定好请求的类型,文件的传输不同于传输字段,字段的传输一般json就好了,但是文件是有特定的传输类型的。
说一下很少有人知道的请求头的类型知识吧!!!
如果想了解更多的文件上传的底层原理----推荐一篇文章
链接: https://blog.csdn.net/qq_27053493/article/details/100589143
w3c用的类型是MediaType格式的,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请求中的媒体类型信息。
常见的媒体类型有:
text/html : HTML格式
text/plain :纯文本格式
text/xml : XML格式
image/gif :gif图片格式
image/jpeg :jpg图片格式
image/png:png图片格式
以application开头的媒体格式类型:
application/xhtml+xml :XHTML格式
application/xml : XML数据格式
application/atom+xml :Atom XML聚合格式
application/json : JSON数据格式
application/pdf :pdf格式
application/msword : Word文档格式
application/octet-stream : 二进制流数据(如常见的文件下载)
application/x-www-form-urlencoded : <form encType=””>中默认的encType,form表单数据被编码为key/value格式发送到服务器(表单默认的提交数据的格式)
另外一种常见的媒体格式是上传文件之时使用的:
multipart/form-data : 需要在表单中进行文件上传时,就需要使用该格式
而我们使用的就是multipart/form-data格式的content-Type
2. 接口有了之后就开始写代码了,我一开始使用的是element UI的上传组件,正常使用的话就是action里配置后端的接口路径就好了,然后按照element UI的组件配置就好了,注意请求的头要配置,组件中有一个属性hearders可以配置。
3.但是我要说的就是那个使用element UI出错 而且解决不了的时候(我这里显示的是请求时未携带token,但是试了网上的办法 还是不行),我们只能曲线救国的解决啦,大体的思路是使用element的upload组件的before-upload绑定的方法,获取file和fileList后自己使用js,使用f表单来传文件,解决上传的问题
4.上代码(用的vue)
这个代码是组件在文件上传前绑定的方法,主要是做验证并获取文件
beforeUpload(file){
const isTAR = file.type === 'application/x-tar';
if (!isTAR) {
this.$message.error('上传文件只能是 TAR 格式!'); //进行验证文件的类型
}else{
this.file = file; //获取文件并保存
//读取文件的MD5值并展示
let spark = new SparkMD5();
let filereader = new FileReader();
filereader.readAsBinaryString(file)
filereader.onload = e => {
spark.appendBinary(e.target.result);
this.md5 = spark.end()
}
}
return isTAR;
},
upload(file){
let formData = new FormData(); //使用FormData来传输文件,就是form的升级版
formData.append('upload',file);//这就是一个表单中一个字段和值,upload是key, file是value
Axios.post('这里写你自己的路径',formData,
{headers: {'Content-Type': 'multipart/form-data'} //设置请求头
})
.then(res => {
console.log(res)
if (res.status === 200) {
this.$message.error("文件上传成功!")//上传成功
} else {
this.$message.error("文件上传失败!")
}
});
},
5.关于文件上传的请求的浏览器调试
这个是成功的network的内容