Element-Ui之Upload组件,利用axios+腾讯云cos上传

最新推荐文章于 2024-07-30 08:51:24 发布

flee-lether

最新推荐文章于 2024-07-30 08:51:24 发布

阅读量1.9k

点赞数 2

分类专栏： web vuejs 文章标签： upload vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_23398171/article/details/103883298

版权

这篇博客介绍了如何结合腾讯云COS服务和Element-UI的Upload组件，通过axios实现前端文件上传。文章详细阐述了上传的三个关键步骤：设置文件存储位置、文件转为二进制流以及上传到COS服务器，并提供了完整的代码示例。

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

利用腾讯云cos做文件服务器，配合element-ui的upload组件实现。

腾讯cos上传主要分为三个步骤

设置文件存储位置并返回上传文件地址
将文件转化为二进制流
通过二进制流进行文件上传

设置文件存储位置

通过生成guid保证上传的文件不会被覆盖

function guid() {
   
  function S4() {
   
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
  return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
}

设置并获取cos文件存储路径

_axios
	.get(url + "?path=" + guid())
	.then(data => {
   
	  const uploadUrl = data;
      // TODO 上传文件
	});

将文件转化为二进制流

主要利用FileReader实现。

let fr = new FileReader();
    fr.readAsDataURL(file);
    fr.addEventListener(
      "load",
      () => {
   
        let arr = fr.result.split(",");
        let bstr =