博客

首先是html部分

 <el-upload
                    action=""
                    list-type="picture-card"
                    :on-success="upLoadSuccess"
                    :file-list="picList"
                    :http-request="uploadPicture"
            >
                <i class="el-icon-plus"></i>
            </el-upload>

js部分

单文件上传的话是将图片二进制字节流作为body主体直接上传,不需要Base64编码,首先需要读取文件字节流,转字节流数组,有一点很重要content-type 需要指定为image/jpeg,不然可能会导致浏览器对字节流base64编码

js代码

            uploadPicture(params) {

                let file = params.file
                let reader = new FileReader()
                reader.readAsArrayBuffer(new Blob([file]))
                reader.onload=()=>{
                    axios.post("xxxx",reader.result,{
                        headers:{
                            accessToken: "xxxx",
                            'Content-Type': 'image/jpeg'
                        }
                    })
                }
            },

之前被content-type 搞了很久 网上的说法都是必须把content-type 指定为multipart/form-data,并且将数据放到formData对象中,我后来问了后台这种方式适合多文件传输 字节流的确需要base64编码 然后放到formData中 这样方便数据分隔 我可能表述有问题或者理解上有错漏 如果有了解的比较清楚的朋友 望在评论里指正