content disposition_图片Content-Type的那些事

最近被反馈一个问题，说上传到阿里oss的图片资源，oss和cdn地址赋值给img标签的src属性不显示，用浏览器打开直接下载，也不能预览，最后发现是Content-Type的原因。

直接访问图片地址，http的响应头Content-Type为application/octet-stream，这是应用程序文件的默认值。意思是未知的应用程序文件，浏览器一般不会自动执行或询问执行。浏览器会像对待 设置了HTTP头Content-Disposition 值为attachment的文件一样来对待这类文件。

查看了代码发现，在用ali-oss上传的时候请求头设置的Content-Type就是application/octet-stream，更改成图片类型，问题得到了解决。

图片的类型有很多种，对用的Content-Type值总结如下：

switch(ext) {
    case 'jpg':
    case 'jpeg':
        imgMime = 'image/jpeg'
        break
    case 'png':
        imgMime = 'image/png'
        break
    case 'svg':
        imgMime = 'image/svg+xml'
        break
}

ali-oss可以设置mime属性，代码如下：

fileUploadClient.multipartUpload(objectPath, blob, { mime: imgMime }).then(() => {
    ......
    ......
})

官方文档地址：

https://www.npmjs.com/package/ali-oss#multipartuploadname-file-options​www.npmjs.com

mime表示媒体类型（通常称为 Multipurpose Internet Mail Extensions或 MIME类型）是一种标准，用来表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化。