vue、thinkphp实现腾讯云对象存储COS图片上传

在Vue前端和ThinkPHP后端环境下实现腾讯云COS图片上传，可以分为以下几个步骤：

1. 在腾讯云控制台创建COS存储桶，并获取相应的SecretId、SecretKey和存储桶的Region以及Bucket名。

2. 在Vue项目中安装腾讯云COS的JavaScript SDK：

   
   
   
   npm install cos-js-sdk-v5 --save

3. 在Vue组件中引入SDK并配置COS，并创建上传方法：

   
   
   
   // Vue组件中
   import COS from 'cos-js-sdk-v5';
    
   export default {
     data() {
       return {
         cos: null,
       };
     },
     created() {
       const cos = new COS({
         SecretId: '你的SecretId',
         SecretKey: '你的SecretKey',
       });
       this.cos = cos;
     },
     methods: {
       async uploadImage(file) {
         try {
           // 上传到COS的文件路径，例如：img/head_img/2023/03/21/random_name.png
           const fileName = `img/head_img/${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}/${file.name}`;
           const result = await this.cos.putObject({
             Bucket: '你的Bucket', // 例如：example-1250000000
             Region: '你的Region', // 例如：ap-beijing
             Key: fileName, // 文件名
             Body: file, // 上传文件对象
           });
           // 返回文件的访问链接
           return result.Location;
         } catch (error) {
           console.error('上传失败:', error);
           throw error;
         }
       },
     },
   };

4. 在ThinkPHP后端设置对应的腾讯云API密钥，并创建API接口用于Vue前端调用：

   
   
   
   // ThinkPHP控制器中
   use Qcloud\Cos\Client;
    
   class UploadController {
       public function upload() {
           $file = request()->file('file');
           // 移动到服务器的临时文件夹
           $savename = \think\facade\Filesystem::disk('public')->putFile('topic', $file);
           $filePath = 'path/to/your/upload/directory/' . $savename;
    
           // 配置COS参数
           $secretId = '你的SecretId';
           $secretKey = '你的SecretKey';
           $region = '你的Region';
           $bucket = '你的Bucket';
    
           $cosClient = new Client([
               'region' => $region,
               'credentials' => [
                   'secretId'  => $secretId,
                   'secretKey' => $secretKey
               ],
           ]);
    
           try {
               $result = $cosClient->putObject([
                   'Bucket' => $bucket,
                   'Key' => 'img/head_img/' . date("Y/m/d") . '/' . $file->getOriginalName(), // 文件路径和文件名
                   'Body' => fopen($filePath, 'rb')
               ]);
               return json(['url' => $result['