解决：打开阿里云图片显示下载，而不是直接预览的问题

我会带着你远行 2023-02-13 14:50 356阅读 0赞

两种情况：  
第一种非代码层 ，确实打不开，纯粹下载问题。必须强制绑定一个自己的二级域名即可，在你的顶级域名下面开一个二级域名，使用pic即可。  
绑定域名地址：https://oss.console.aliyun.com/bucket/oss-cn-shenzhen/img-design/transfer/domain  
此处不是域名解析那里，可以两个地方都绑定一样的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA_size_16_color_FFFFFF_t_70_pic_center]  
第二种情况：代码问题按以下思路解决。

## 第一种方式： ##

## 修改：OssClient.php文件中的 DEFAULT\_CONTENT\_TYPE的值为image/jpeg。 ##

解释：CONTENT\_TYPE在php SDK中设置的值是application/octet-stream ： 二进制流数据（如常见的文件下载）。现在我们修改成 image/jpeg ：jpg图片格式。所以打开后就能直接预览了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA_size_16_color_FFFFFF_t_70]

常见的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 ： 需要在表单中进行文件上传时，就需要使用该格式

我们来看阿里云的核心上传代码：

/** * Uploads a local file * * @param string $bucket bucket name * @param string $object object name * @param string $file local file path * @param array $options * @return null * @throws OssException */
        public function uploadFile($bucket, $object, $file, $options = NULL)
        { 
            $this->precheckCommon($bucket, $object, $options);
            OssUtil::throwOssExceptionWithMessageIfEmpty($file, "file path is invalid");
            $file = OssUtil::encodePath($file);
            if (!file_exists($file)) { 
                throw new OssException($file . " file does not exist");
            }
            $options[self::OSS_FILE_UPLOAD] = $file;
            $file_size = filesize($options[self::OSS_FILE_UPLOAD]);
            $is_check_md5 = $this->isCheckMD5($options);
            if ($is_check_md5) { 
                $content_md5 = base64_encode(md5_file($options[self::OSS_FILE_UPLOAD], true));
                $options[self::OSS_CONTENT_MD5] = $content_md5;
            }
            if (!isset($options[self::OSS_CONTENT_TYPE])) { 
                $options[self::OSS_CONTENT_TYPE] = $this->getMimeType($object, $file);
            }
            $options[self::OSS_METHOD] = self::OSS_HTTP_PUT;
            $options[self::OSS_BUCKET] = $bucket;
            $options[self::OSS_OBJECT] = $object;
            $options[self::OSS_CONTENT_LENGTH] = $file_size;
            $response = $this->auth($options);
            $result = new PutSetDeleteResult($response);
            return $result->getData();
        }

注意第二个参数￥object，和这行

if (!isset($options[self::OSS_CONTENT_TYPE])) { 
                $options[self::OSS_CONTENT_TYPE] = $this->getMimeType($object, $file);
            }

如果没有设置Content-Type，那么就走这里，来看getMimeType（$object, $file），

private function getMimeType($object, $file = null)
        { 
            if (!is_null($file)) { 
                $type = MimeTypes::getMimetype($file);
                if (!is_null($type)) { 
                    return $type;
                }
            }
    
            $type = MimeTypes::getMimetype($object);
            if (!is_null($type)) { 
                return $type;
            }
    
            return self::DEFAULT_CONTENT_TYPE;
        }

这里很明显了，最后返回了什么，系统默认设置，也就是最初定义的常量的地方。  
通过了解，我们明白了阿里云设置的默认图片上传格式是下载格式。

## 第二种方式： ##

我们将上传的方式修改一下，设置一下上传的Content-Type。  
例如：

/** * 阿里云图片上传 * @param $local_path 本地文件或临时文件路径 * @return |null */
        public function uploadAliyun($local_path)
        { 
            require "../vendor/aliyun-oss-php-sdk-master/autoload.php";
            $accessKeyId = config('ALIYUN.accessKeyId');
            $accessKeySecret = config('ALIYUN.accessKeySecret');
            $endpoint = config('ALIYUN.endpoint');
            $bucket = config('ALIYUN.bucket');
    
            $aliyun_file = md5($local_path.time().rand(1,100000)).'.'.pathinfo($local_path,PATHINFO_EXTENSION);
            try { 
                $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint);
                $result = $ossClient->uploadFile($bucket, $aliyun_file, $local_path,['Content-Type'=>'image/jpg']);
                return $result['info']['url'];
            } catch (\Exception $e) { 
                echo $e->getMessage();
                return null;
            }
    
        }

将函数$ossClient->uploadFile（）第四个参数设定成image/jpg即可。这种方式避免了修改源代码，不使用默认值从而达到预览图片的效果。

## 下面列出两种方式上传：自选一种必定行，第二个方式还是能防canvas跨域的方法 ##

方法一：uploadFile

/**
         * 阿里云图片上传
         * @param $local_path   本地文件或临时文件路径
         * @param $aliyunImg    阿里云路径
         * @param $ext          图片后缀
         * @return |null
         */
        public function uploadAliyun($local_path,$aliyunImg,$ext)
        { 
            include_once $_SERVER['DOCUMENT_ROOT']."/vendor/aliyun-oss-php-sdk-master/autoload.php";
    
            $accessKeyId = 'LTAI4G27kVGxTdtw1ovvATE5';
            $accessKeySecret = '9HPp1wHOBQGzjnAqRfTz2VfiQxAv2t';
            $endpoint = 'oss-cn-shenzhen.aliyuncs.com';
            $bucket = 'hanlusir-shop';
    
            try { 
                $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint);
                $result = $ossClient->uploadFile($bucket, $aliyunImg, $local_path,['Content-Type'=>'image/'.$ext]);
                return $result['info']['url'];
            } catch (\Exception $e) { 
                echo $e->getMessage();
                return null;
            }
    
        }

第二个参数阿里云路径可以写成带目录结构的，如果目录不存在的话，阿里云会自动创建目录。

方法二：putObject

/**
     * 阿里云图片上传
     * @param $local_path   本地文件或临时文件路径
     * @param $aliyunImg    阿里云路径   可以带上目录
     * @param $ext          图片后缀\与上传图片保持一致
     * @return |null
     */
    function uploadAliyun( $local_path , $aliyunImg , $ext = 'jpg' )
    { 
        include_once $_SERVER['DOCUMENT_ROOT']."/../vendor/aliyun-oss-php-sdk-master/autoload.php";
        $aliyunInfo = db('aliyun_config')->find(1);
        $accessKeyId = $aliyunInfo['accessKey_id'];
        $accessKeySecret = $aliyunInfo['accessKey_secret'];
        $endpoint = 'oss-cn-shenzhen.aliyuncs.com';
        $bucket = 'img-ddeessign';
        $local_path = file_get_contents($local_path);
        try { 
            $ossClient = new \OSS\OssClient($accessKeyId, $accessKeySecret, $endpoint);
            $options = array(
                \OSS\OssClient::OSS_HEADERS => array(
                    'Cache-Control' => 'no-cache',
                    'Content-Type'=>'image/'. $ext
                ));
            $result = $ossClient->putObject($bucket, $aliyunImg, $local_path, $options);
            $root_path = 'img.7654321.ddeessign';
            $url = 'img-ddeessign.oss-cn-shenzhen.aliyuncs.com';
            return str_replace($url, $root_path, $result['info']['url']);
        } catch (\Exception $e) { 
            echo $e->getMessage();
            return null;
        }
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200918154127531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529180745557.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzk3MA==,size_16,color_FFFFFF,t_70