使用jsJdk异步上传图片至OSS服务器

阿里云官方文档中给的基本都是同步上传文件的DEMO,可能是异步的比较简单,但是由于自己JS基础还不够牢固,在学习使用的时候也很闹心,因为老是看着看着就看到异步的那边去了。将自己写好的的一个DEMO放于博客中,万一能够帮助到任何一个和我一样的朋友也是好的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片至OSS服务器DEMO(分片上传)</title>
</head>
<body>
<input type="file" id="pic">
<button οnclick="upload()">上传</button>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
<script type="text/javascript">
    /*OSS服务器配置*/
    var client = new OSS.Wrapper({
        region:'oss服务器创建的地点',
        //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,创建并使用STS方式来进行API访问
        accessKeyId: '访问控制中创建的accesskeyId',
        accessKeySecret: '访问控制中创建的accesskeyId对应的密钥,只有在刚创建的时候会显示,需要保存下来',
        bucket: 'oss服务器上创建的bucket的名称'
    });

    function upload(){
        var pic = document.getElementById("pic").files[0];//获取html5的file对象
        /**
         * 如果想将图片上传到某个文件夹的话,将文件夹路径拼接到picName中
         * 如:存到test文件夹下"test/pic.jpg"
         * @type {string}
         */
        var picName = "test/"+pic.name;//拼接上传图片名称
        //上传图片至OSS服务器
        client.multipartUpload(picName,pic).then(res=>{
            console.log(res);
        }).catch(err=>{
            console.log(err);
        })
    }
</script>
</html>

阿里云官方推荐创建client的时候还是要使用stsToken比较安全,目前我还没有尝试到这个demo,等我尝试成功后,再补充进来。

补充:

上传过程遇到过的问题

1. c.stat is not a function  出现这个问题根据https://help.aliyun.com/document_detail/32069.html?spm=a2c4e.11153987.0.0.2b071193rF9dsN中的bucket设置设置一下就能解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下步骤将文件上传到阿里云OSS服务器: 1. 引入OSS SDK和流处理相关的jar包 2. 创建一个OSSClient对象,用于与OSS服务器进行交互 3. 创建一个InputStream对象,用于读取本地文件的数据流 4. 使用OSSClient的putObject方法上传文件,其中第一个参数为Bucket名称,第二个参数为上传到OSS服务器后的文件名,第三个参数为InputStream对象 以下是Java代码示例: ```java import com.aliyun.oss.OSS; import com.aliyun.oss.OSSClientBuilder; import java.io.FileInputStream; import java.io.InputStream; public class UploadFile { public static void main(String[] args) { String endpoint = "yourEndpoint"; String accessKeyId = "yourAccessKeyId"; String accessKeySecret = "yourAccessKeySecret"; String bucketName = "yourBucketName"; String objectName = "yourObjectName"; String filePath = "yourFilePath"; // 创建OSSClient实例 OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); try { // 读取本地文件的数据流 InputStream inputStream = new FileInputStream(filePath); // 上传文件到OSS服务器 ossClient.putObject(bucketName, objectName, inputStream); // 关闭输入流 inputStream.close(); System.out.println("File uploaded successfully."); } catch (Exception e) { e.printStackTrace(); } finally { // 关闭OSSClient实例 ossClient.shutdown(); } } } ``` 注意:在使用完InputStream对象后,需要关闭它以释放资源。此外,上传成功后会打印出"File uploaded successfully."的提示信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值