1、首先要把aliyun-oss-sdk.js包下载下来,放到指定的目录下面  在要用的页面引入或者在index.html入口文件全局引入;

  <script src="util/aliyun-oss-sdk.js"></script>

  我是放到util文件下面,在util里创建公用js的文件,在里面编写

  getClient: function () {
return new OSS.Wrapper({
region: 'oss-cn-shanghai', //你的oss地址 ,具体位置见下图
accessKeyId: 'LTAIREJEnnClPTln', //你的ak
accessKeySecret: '65B1DuHC2FslxxWjJXdhJyXSs7tMV5', //你的secret
bucket: 'tmxkshop' //你的oss名字
});
},

2、在你要用的页面这样写:

    var client = util.getClient();
var loading = null;
$("#txtFile_up_follow").on("change", function () {
if (this.files.length > 1) return layer.msg("只能上传一张图片"); for (var i = 0; i < this.files.length; i++) {
var extensionName = this.files[i].name.substr(
this.files[i].name.lastIndexOf(".")
); // 文件扩展名
if (
!(
extensionName === ".png" ||
extensionName === ".jpg" ||
extensionName === ".jpeg"
)
)
return layer.msg("请上传png或jpg或jpeg格式图片");
}
loading = layer.load(2);
for (var i = 0; i < this.files.length; i++) {
clientUpload(this.files[i], this.files.length);
}
});
function clientUpload(fileItem, fileLength) {
arr = []; //每重新上传之前 清空arr
var datetoday = util.getTodayDate();
var randomStr = "/" + new Date().getTime() + util.randomString(4); // 4位随机字符串
var extensionName = fileItem.name.substr(fileItem.name.lastIndexOf(".")); // 文件扩展名
var fileName = "image/" + datetoday + randomStr + extensionName; // 文件名字(相对于根目录的路径 + 文件名)
client.multipartUpload(fileName, fileItem).then(function (result) {
if (result.res.status === 200) {
arr.push(result.res.requestUrls[0].split("?")[0].replace('http', 'https'));
if (arr.length >= fileLength) {
$(".accPic").attr("src", arr[0]);
$("input[name='url']").val(arr[0]);
$(".showImg").show();
} else {
$(".showImg").hide();
}
layer.close(loading);
} else {
layer.msg("文件上传失败");
}
});
}

layui使用OSS上传的更多相关文章

  1. c#版阿里云oss上传——基于layui、pupload的oss 后端web端直传的vue组件

    废话前言 去年,做项目用到oss上传,度娘上逛了一圈写了个前后端代码结合的c#版oss上传. 今年又要用到oss上传时发现很难复用,复用改动的范围太大,显然这个轮子不合格.于是想了下,花了一天的时间( ...

  2. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  3. .net mvc + layui做图片上传(一)

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  4. 关于 tp5.0 阿里云 oss 上传文件操作

    tp5.0 结合阿里云oss 上传文件 1.引入 oss 的空间( composer install 跑下第三方拓展包及核心代码包) 备注:本地测试无误,放到线上有问题  应该是移动后的路劲(相对于服 ...

  5. layui结合SpringMVC上传文件以及携带额外的参数上传文件

    今天在使用layui的过程中,遇到了使用其上传文件的模块.自己感觉文件上传还是bootstrapfileinput插件比较好用一些,灵活方便,bootstrapfileinput使用方法参考:http ...

  6. oss上传文件0字节

    最近使用oss上传文件,不同项目中使用的版本也不同,之前的都能正常上传,最近因需要添加ObjectMetaData属性,扩展了一个方法,发现上传的文件始终是0字节的,最终跟源码发现conntentLe ...

  7. .Net之Layui多图片上传

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

  8. TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片

    **TP5+阿里云OSS上传文件第三节,实现淘宝上传商品图片首先我们来看看淘宝的功能和样式:** 之后看看制作完成的演示:(由于全部功能弄成GIF有点大,限制上传大小好像在1M之内,压缩之后也有1.9 ...

  9. layui + jfinal 实现上传下载

    1.需要把jfinal的环境配置好 2.导入相关的库文件 layui的库文件 就是这两个文件需要导入到自己的页面 注意:jfinal总会把路径拦截,所以需要静态文件处理.本人不太懂.就网上找了下,说w ...

  10. OSS上传文件到阿里云

    最近做项目,需要上传文件,因为上传到项目路径下,感觉有时候也挺不方便的,就试了一下上传文件到阿里云oss上去了, oss的使用网上有很多介绍,都是去配置一下需要的数据,然后直接调用他的api就可以了. ...

随机推荐

  1. 02、kafka介绍

    001.kafka简介 kafka消息队列有两种消费模式,分别是点对点模式和订阅/发布模式.具体比较可以参考Kafka基础–消息队列与消费模式. 下图是一个点对点的Kafka结构示意图 produce ...

  2. 解决idea不能自动下载maven配置文件pom.xml下的jar包依赖的问题

    表现:无法下载pom配置文件中的依赖包,或只能下载少数包,各项配置都正确的情况 理由未知: 百度了很长一段时间,网上给出比较精准的解决之一是 setting>>maven>>去 ...

  3. idea使用EasyCode集成ruoyi框架自动生成代码

    1.ruoyi框架源码获取 https://gitee.com/zhangmrit/ruoyi-cloud/tree/nacos/ 2.需要ruoyi调整部分代码 public class BaseC ...

  4. HDFS学习记录

    HDFS 1.hdfs整体工作机制: 1>hdfs:分布式文件系统. hdfs:分布式文件系统 hdfs有着文件系统共同的特征: 2>有目录结构,顶层目录是:  / 3>系统中存放的 ...

  5. 【2020NOI.AC省选模拟#7】A. t1

    题目链接 原题解: 由于$+$满足幂等性,我们可以设$f_{i,j}$为从$i$号点向根$2^j$个点的权值之和,并且倍增计算出$f$.在查询是,可以像ST表一样用至多四个$f$中的路径拼出询问路径. ...

  6. 利用matlab求解函数微分

    利用matlab解决求解函数微分 matlab,微分 1. 问题提出 最近在复习高等数学,感觉可以结合 去理解他. 遇到了一个题目: 2. 具体代码 %{ 解决函数微分问题 %} clc; clear ...

  7. 微信小程序 的 openid,appid,unionid

    openid: 用户在同一个小程序下的唯一表示,即同一个用户在不同的小程序下的openid是不同的 appid 小程序唯一凭证,即 AppID,每个小程序都有自己的一个appid unionid 如果 ...

  8. python实现学生信息管理系统——界面版

    前言(写于2022年5月17日) 这篇博客是我两年前大二时写的,一直放在草稿箱里,还没写完,现在快毕业了,突然翻出来了.虽然博客没写完,但早就写好了代码,可运行的exe文件以及文档.现在上传到gite ...

  9. QPushButton与Enter相链接

    ui->pushButton_login->setFocus(); // 设置默认焦点 ui->pushButton_login->setShortcut(QKeySequen ...

  10. Excel如何默认禁用科学计数法?

    微软论坛版主回复"无法默认禁用此功能",可在"设置单元格格式"-"自定义"-"类型"改为"0",去除 ...