`

JS直传图片到阿里云oss服务器,不占用服务器带宽

阅读更多
 <script type="text/javascript">
    var client = new OSS.Wrapper({
      region: "host",
      accessKeyId: "key",/*这两者到阿里云控制台获得*/
      accessKeySecret: "Secret",
      bucket: "bucket"/*装图片的桶名*/
    });
    document.getElementById('fileName').addEventListener('change', function (e) {
      var file = e.target.files[0];
      var storeAs = "headImg/"+getUuid()+".jpg";
      console.log(file.name + ' => ' + storeAs);
      client.multipartUpload(storeAs, file).then(function (result) {
        var uploadPath="http://"+oss.bucket+".oss-cn-shenzhen.aliyuncs.com/"+storeAs;/*将这段字符串存到数据库即可*/
        console.log(uploadPath);
        $("[name=img]").attr("src",uploadPath);
      }).catch(function (err) {
        console.log(err);
      });

      function getUuid(){
      var len=32;//32长度
      var radix=16;//16进制
      var chars='0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');var uuid=[],i;radix=radix||chars.length;if(len){for(i=0;i<len;i++)uuid[i]=chars[0|Math.random()*radix];}else{var r;uuid[8]=uuid[13]=uuid[18]=uuid[23]='-';uuid[14]='4';for(i=0;i<36;i++){if(!uuid[i]){r=0|Math.random()*16;uuid[i]=chars[(i==19)?(r&0x3)|0x8:r];}}}
      return uuid.join('');
}
    });

这里图片的名称采用随机生成 ,因为不能重复。
分享到:
评论

相关推荐

    ueditor上传图片到阿里云oss服务器

    3. 服务器端接口接收到图片后,使用阿里云OSS SDK进行上传操作,并保存OSS返回的图片URL。 4. 服务器返回上传成功的响应,包含图片的URL。 5. ueditor解析响应,将图片URL替换为HTML代码,显示在编辑器中。 **三、...

    帝国CMS7.5阿里云OSS服务器远程直传插件

    【帝国CMS7.5阿里云OSS服务器远程直传插件】是一款专为帝国内容管理系统(EmpireCMS V7.5)设计的扩展插件,它使得用户能够直接在阿里云对象存储服务(OSS)上进行文件上传操作,极大地提高了网站的文件管理效率和...

    js代码实现图片上传阿里云OSS

    总结来说,使用JavaScript和`plupload`实现图片上传到阿里云OSS,涉及到的关键技术包括:前端与后端的交互、`plupload`组件的配置与使用、阿里云OSS SDK的调用以及上传事件的监听与处理。这不仅提升了用户体验,还...

    阿里云OSS直传带回显,纯html+JS文件,适用于头像图片上传等,亲测可用

    在描述中提到的"更改阿里云OSS直传接口代码",可能指的是在JS文件中配置OSS的API接口URL,以便正确地向OSS发送请求。此外,"优化JS代码,带上传后图片回调"意味着在上传完成后,会执行一段回调函数,用于处理上传...

    PHP一键上传图片到阿里云OSS对象存储并返回路径

    PHP一键上传图片到阿里云OSS对象存储,自己编写的代码,有一些注释。已在本地测试,运行成功。注意:1.有阿里云的对象存储;2.要获取AccessKey及找准Endpoint,修改代码中相应的部分;3.点击即上传,只支持图片格式...

    OSS头像上传,JS直传带回调图片,仅使用HTML+JS文件更改阿里云OSS直传接口代码亲测可用

    OSS直传带图片回调,纯html+JS文件,适用于头像图片上传, 不带按钮,可直接点击头像图片上传,带进度条,上传后回调上传后的图片 更改阿里云OSS直传接口代码 优化JS代码,带上传后图片回调。我自己测了可以用

    阿里云oss web上传demo.rar

    阿里云OSS(Object Storage Service)是阿里云提供的一个高可用、高可靠、低成本的云存储服务,适合存储各类非结构化的数据,如图片、视频、文档等。本示例是一个Web应用程序,演示如何实现从网页直接上传文件到阿里...

    微信小程序上传图片到阿里云oss

    在阿里云OSS控制台,可以获取到Bucket的域名,将其绑定到微信小程序的服务器域名设置中。之后,当需要显示图片时,可以通过OSS提供的图片URL直接在小程序中展示。 总结一下,这个项目涵盖了以下知识点: 1. 微信小...

    Java下载https文件并上传阿里云oss服务器

    Java下载HTTPS文件并上传到阿里云OSS服务器是常见的文件操作任务,特别是在开发云存储解决方案时。以下将详细讲解这个过程中的关键知识点。 首先,Java下载HTTPS文件涉及到网络请求和安全证书的处理。HTTPS...

    golang阿里云oss图片上传

    golang阿里云oss图片上传

    帝国CMS全站同步阿里云OSS和百度编辑器上传图片同步阿里云OSS支持粘贴上传图片

    默认情况下,UEditor的图片上传功能是直接存储在服务器上的,而我们希望的是图片也能同步到阿里云OSS。为此,我们需要下载并研究"ueditor.zip",这包含了UEditor的源码和相关配置文件。 集成UEditor与阿里云OSS的...

    阿里云oss上传照片js 、jquery

    阿里云OSS(Object Storage Service)是阿里云提供的高可用、高可靠、低成本的数据存储服务。它可以帮助企业和个人存储大量的图片、视频、文档等非结构化数据,并且提供了丰富的API和SDK,方便开发者进行集成和二次...

    ckeditor_4.7.3和plupload,页面直传阿里云oss.zip

    ckeditor_4.7.3和plupload...ckeditor 原来的图片编辑只能把文件上传到服务器,通过服务器中转上传到阿里云OSS,更改后可以只后台生成签名,页面直接把图片传到阿里云OSS。 只用配置好服务器的签名地址就可以快速使用。

    阿里云oss存储(js端签名直传到oss)

    以下是对"阿里云oss存储(js端签名直传到oss)"这一主题的详细说明: 1. **签名机制**:签名是确保上传请求安全的重要手段。在JavaScript端直传时,需要生成一个由Access Key Secret计算的签名字符串,这个字符串...

    PHP一键上传图片到阿里云OSS对象存储并返回路径.rar

    PHP一键上传图片到阿里云OSS对象存储,自己编写的代码,有一些注释。已在本地测试,运行成功。注意:1.有阿里云的对象存储;2.要获取AccessKey及找准Endpoint,修改代码中相应的部分;3.点击即上传,只支持图片格式...

    阿里云OSS临时授权STS直传视频文件到OSS服务器教程(含所需的核心js代码)

    在前端,我们可以利用browser.js库,它是阿里云提供的用于浏览器端直接与OSS交互的JavaScript库。首先,前端需要通过Ajax请求向后端服务器获取STS token。获取到token后,使用browser.js初始化OSS客户端,传入STS ...

    帝国CMS百度编辑器图片附件同步整合阿里云OSS

    标题中的“帝国CMS百度编辑器图片附件同步整合阿里云OSS”表明了这个项目是关于将帝国CMS(Empire CMS)系统中使用的百度编辑器(UEditor)与阿里云的对象...,目的是实现图片附件在上传时能够自动同步到阿里云OSS上...

    前端Jquery,Vue通过授权URL直传阿里云OSS

    在前端开发中,有时我们需要将用户上传的文件直接存储到云端服务器,比如阿里云的对象存储服务(OSS)。本文将详细介绍如何使用Jquery和Vue.js这两个前端库,结合阿里云OSS提供的API,实现通过授权URL进行文件的直传...

    前端js获取阿里云oss私有图片加参数及生成签名signature的sdk

    前端js获取阿里云oss私有图片加参数及生成签名signature的sdk

Global site tag (gtag.js) - Google Analytics