前端上传图片文件到服务器 COS

柔情只为你懂 2023-01-15 11:26 208阅读 0赞

##### 平时前端上传图片都会要后端中转一下发送给资源服务器再返回路径给前端，这样势必影响效率。 #####

在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中SecretId，SecretKey）保存在前端不太安全。

#### 解决方法 向后端请求一个key值再拿这个key来请求服务器 ####

## 文件流形式上传 ##

import axios from 'axios'
    import COS from "cos-js-sdk-v5";
    import {  Message } from 'element-ui'
    
    /* @fail:文件流文件 @folderName:文件夹名称 上传文件命名 对应nameRule /功能模块英文代码/年/月/日/时间戳.格式 如：/功能模块英文代码/2021/04/21/时间戳.jpg */ 
    export function requestServer(fail,folderName){ 
      return new Promise((resolve,reject)=>{ 
        let date = new Date();
        let nameRule=`${ folderName}/${ date.getFullYear()}/${ date.getMonth()+1}/${ date.getDate()}/${ date.getTime()}.${ fail.type.split('/')[1]}` ;//命名规则
        let authorization = COS.getAuthorization({ 
          SecretId: "", // 可传固定密钥或者临时密钥
          SecretKey: "", // 可传固定密钥或者临时密钥
          Method: "PUT",
          Pathname: nameRule,
          Headers: {  "Content-Type": "image/jpeg;image/jpg;image/png;image/gif" },
          Expires: 9000,
        });
        let url =`https://你自己的资源服务器.com/${ nameRule}?${ authorization}`;
        let FR = new FileReader();
        FR.addEventListener("load", function (e) { 
          let buffer = e.target.result;
          axios({ 
            method: "put",
            headers:{ 'Content-Type': 'image/jpeg;image/jpg;image/png;image/gif'},
            url: url,
            data: buffer,
          }).then((res) => { 
            console.log("成功信息",res)
            resolve(`https://你自己的资源服务器.com/${ nameRule}`)
          }).catch((err) => { 
            console.log("失败信息",err)
            Message({ 
              message: "文件上传失败",
              type: 'error'
            })
            reject(err)
          });
        });
        FR.readAsArrayBuffer(fail);
      })
    }

## base64上传 ##

base64实际开发中我没有用到，只原生测试了一下就分享出来了 感兴趣的朋友可以封装一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIzMDI1MA_size_16_color_FFFFFF_t_70]: /images/20221022/e2032288d22b4426b9a8c34e1ace0a3f.png