关于用element UI 的upload上传文件时的一些问题总结

关于用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 ： 
中默认的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的内容