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

最新推荐文章于 2024-09-11 11:47:52 发布

前端小吕

最新推荐文章于 2024-09-11 11:47:52 发布

阅读量3.6k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_49230250/article/details/116015290

版权

本文介绍了如何在前端直接上传文件到资源服务器，以提高效率，同时解决了密钥安全性问题。通过向后端请求一次性密钥，使用COS SDK进行文件流或Base64方式上传，确保了安全性和效率。详细阐述了上传过程中的命名规则、授权机制及错误处理。

摘要由CSDN通过智能技术生成

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

在开发中前端是可以直接上传资源文件到服务器上的，只不过服务器密钥（下文中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上传

var nameRule="";//命名规则
var 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 a="base64编码"
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = (res) => {
	if (xhr.readyState === 4) {
		if (xhr.status === 200) {
			console.log("成功图片路径为：","https://你自己的资源服务器.com/"+nameRule);
		} else {
			console.log("上传服务器失败");
		}
	}
};
xhr.open('PUT', url);
xhr.setRequestHeader('Content-Type', 'image/jpeg;image/jpg;image/png;image/gif');
xhr.send(base64ToArrayBufferForImage(a)); // 发送内容。
// 图片的base64字符串转为ArrayBuffer对象。
function base64ToArrayBufferForImage(base64Str) {
   const mark = ';base64,';
   const markIdx = base64Str.indexOf(mark);
   if (markIdx != -1) {
     let startIdx = markIdx + mark.length;
     base64Str = base64Str.substring(startIdx, base64Str.length);
   }
   return base64ToArrayBuffer(base64Str);
}
      
// base64字符串转为ArrayBuffer对象。
 function base64ToArrayBuffer(base64Str) {
   const binaryStr = atob(base64Str);
   const buffer = new Uint8Array(binaryStr.length);
   for (let i = 0; i < binaryStr.length; ++i) {
     buffer[i] = binaryStr.charCodeAt(i);
   }
   return buffer;
}