使用axios上传文件到阿里云对象文件存储服务器oss

刘玉平发布于2019-08-02 16:02 / 3494人阅读

摘要：背景可用于图片音视频日志等海量文件的存储。支持流式写入和文件写入两种方式。这种方式的缺点是，文件要先上传到应用服务器，再上传到，占用带宽资源，过程虽然简单易于操作但是比较繁琐。这里是上面服务端返回的签名对象上传文件名

背景

OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里云oss做文件存储的时候，不可避免的涉及到文件的上传，大概分为两种方式：

服务端验证上传

先将文件传递到应用服务器，再由应用服务器上传至oss服务器，这种方式的优点是简单易懂，nodejs只需要按照文档使用ali-oss中间件上传就行，本文重点不放在这种方式，如果有需要可以私信我。这种方式的缺点是，文件要先上传到应用服务器，再上传到oss，占用带宽资源，过程虽然简单易于操作但是比较繁琐。

服务端签名前端直传

这种方式是我比较推荐使用的，但是需要自己对移动端进行签名，官方的例子给出了一个php版本的签名服务文件，同时上传使用的是plupload这个功能强大，但是不支持模块化使用的插件，于是经过一番琢磨，将php版本的签名服务改成了js版本，同时提供axios版本的文件上传供大家参考，亲测可行。

服务代码：

const crypto =require("crypto")
async getSingature(ctx){
        ctx.status=200;
        const _config={...}//里面存放阿里云oss的配置参数，不详细说明，用的都应该懂
        const OSSAccessKeyID=_config["spring.aliyun.oss.access-key-id"]
        const OSSAccessKeySecret=_config["spring.aliyun.oss.access-key-secret"]
        const OSSEndPoint=_config["spring.aliyun.oss.end-point"]
        const OSSBucketName=_config["spring.aliyun.oss.bucket-name"];
        let now=new Date();
        const expire=300;
        //签名有效时间五分钟，可自行设定
        const end = now.getTime()/1000 + expire;
        //过期时间
        let expiration=new Date((now.getTime()/1000+expire)*1000);
        //oss服务器时间格式iso
        expiration=expiration.toISOString();
        //上传目录
        const dir= ""
        //上传的限制规则
        const condition=["content-length-range",0,1048576000]
        const start=["start-with","key",dir];
        const conditions=[condition]
        const arr={
            expiration,
            conditions
        }
        //上传策略（规则对象转json字符串）
        const policy=JSON.stringify(arr);
        //进行base64编码
        const base64_policy= (new Buffer(policy)).toString("base64");
        
        const string_to_sign=base64_policy;
        //使用crypto签名
        const signature=crypto.createHmac("sha1",     OSSAccessKeySecret).update(string_to_sign).digest().toString("base64");
        const host="http://"+OSSBucketName+"."+OSSEndPoint.split("//")[1];
        const accessid=OSSAccessKeyID;
        //返回结果给前端
        return {
            accessid,
            signature,
            policy:base64_policy,
            expire:end,
            dir,
            host
        }
    }

前端上传:
注意：oss一次只能上传一个文件（只有一个key）,可以循环执行post，key为上传到oss后的文件名。signatureObj这里是上面nodejs服务端返回的签名对象

    var file=ducument.getElementById("file").files[0] 
    var formData = new FormData();
    formData.append("key","上传文件名");
    formData.append("name",file.name)
    formData.append("policy",signatureObj.policy)
    formData.append("OSSAccessKeyId",signatureObj.accessid)
    formData.append("success_action_status","200")
    formData.append("callback","")
    formData.append("signature",signatureObj.signature)
    formData.append("file",file.file)
    axios({
    url:url,
    method:"post",
    data:formdata,
    headers: { "Content-Type": "multipart/form-data" }
})

云服务器 GPU云服务器对象存储oss上传文件阿里云oss挂载到服务器上传文件 java上传文件到oss 对象存储oss修改文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54557.html

使用axios上传文件到阿里云对象文件存储服务器oss

摘要：背景可用于图片音视频日志等海量文件的存储。支持流式写入和文件写入两种方式。这种方式的缺点是，文件要先上传到应用服务器，再上传到，占用带宽资源，过程虽然简单易于操作但是比较繁琐。这里是上面服务端返回的签名对象上传文件名背景 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里...

jas0n 2019-08-22 18:04 评论0 收藏0
oss web直传 服务器签名 - vue版本

摘要：前言为了减轻服务器压力，采用直传的方式，直接把资源图片，文件，视频等上传到阿里云服务器。这个是需要触发这个回调来通知服务器操作结果。服务器端同事调的，通过接口返回给前端的。这个就是签名，最关键的。的的使用如下结束这样就搞定了。前言：为了减轻服务器压力，采用web直传的方式，直接把资源(图片，文件，视频等)上传到阿里云oss服务器。但是阿里只提供 plupload.js 环境下的 d...

Sunxb 2019-08-23 18:06 评论0 收藏0
浅析前端上传

摘要：项目上也用到很多上传文件的地方，七牛云，阿里云，讯飞上传都接触过，所以在这里做一个记录，总结一下前端上传的几种方式。类型的文件名七牛云上传浅析是一个基于七牛开发的前端。 showImg(https://segmentfault.com/img/bVbvibu?w=1920&h=1080); 图片，音频，视频等等这几种常见的资源类型，如果需要从前端上传到服务端，有几种方式呢？不妨回顾一下...

terro 2019-08-26 10:13 评论0 收藏0
图片直传阿里云OSS方案

摘要：和数据直传到相比，以上方法有三个缺点上传慢。端向服务端请求签名，然后直接上传，不会对服务端产生压力，而且安全可靠。规定返回数据的格式，当前默认返回图片信息宽度高度，可获取更多数据。背景每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或app端上传文件到应用服务器，然后应用服务器再把文件上传到OSS。 showImg(https://segmentfault.c...

imtianx 2019-08-23 12:49 评论0 收藏0
SpringBoot 整合阿里云OSS 存储服务，快来免费搭建一个自己的图床

摘要：笔主很早就开始用阿里云存储服务当做自己的图床了。阿里云对象存储文档，本篇文章会介绍到整合阿里云存储服务实现文件上传下载以及简单的查看。 Github 地址：https://github.com/Snailclimb/springboot-integration-examples(SpringBoot和其他常用技术的整合,可能是你遇到的讲解最详细的学习案例,力争新手也能看懂并且能够在看完...

邹强 2019-08-16 13:56 评论0 收藏0