vue 上传图片到阿里云(前端直传:不推荐)
为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行)
代码部分:
<template>
<div class="upLoad">
<div class="file">上传图片
<input type="file" :accept="typeArr" @change="upload($event)">
</div>
</div>
</template>
<style lang="less" scoped>
.file {
position: relative;
left: .26rem;
top: .2rem;
display: inline-block;
background: #32d582;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: white;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
</style>
<script>
export default{
props: ['typeArr', 'size'],
data(){
return {
client: '',
fileSize: 5000000
}
},
methods: {
getRight(){
if (this.size) {
this.fileSize = this.size;
}
this.client = new OSS.Wrapper({
region: "同endpoint",
secure: true,//https
endpoint: '运维会告诉你',
accessKeyId: "id和secret去阿里云控制台获得",
/*accessKeyId,accessKeySecret两者到阿里云控制台获得*/
accessKeySecret: "",
bucket: '' /*装图片的桶名*/
});
},
/**上传图片**/
upload(event){
var self = this;
var file = event.target.files[0];
var type = file.name.split('.')[1];
var storeAs = new Date().getTime() + '.' + type;
var boolean = true;
if (file.size > this.fileSize) {
Toast('亲,图片不能超过!' + this.fileSize / 1000 + 'kb');
return false;
}
if (this.typeArr && this.typeArr.indexOf(type) > 0) {
boolean = false;
}
if (boolean) {
Toast('上传图片格式不支持!请选择' + this.typeArr);
return false;
}
this.getRight();
this.client.multipartUpload(storeAs, file).then(function (result) {
console.log(result)//至此就拿到了返回的路径
self.data.url = result.res.requestUrls[0].split('?')[0];
}).catch(function (err) {
console.log(err);
});
},
}
}
</script>
父组件调用
<up-Load class="files" typeArr="image/png,image/jpg,image/gif,image/jpeg" size="500000">
</up-Load>
注:需引入官网推荐的oss对象的cdn
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
需再次强调的是:该代码为前端直传,accessKeyId,accessKeySecret都暴露在外面,更安全的方法可见官网的“服务端签名后上传”(貌似没示例)
原文地址:https://segmentfault.com/a/1190000013153127
vue 上传图片到阿里云(前端直传:不推荐)的更多相关文章
- vue中上传图片至阿里云oss
1.开通阿里云的oss服务这些这里就不多做介绍了 2.登入阿里云的后台管理系统创建一个Bucket 3.在后台管理系统中进入访问控制 4.点击用户管理->新建用户->填写相关信息,就生成了 ...
- 阿里云OSS-web直传---在服务端c#签名,浏览器直传
OSS web直传---在服务端php签名,浏览器直传 本文:OSS web直传---在服务端c#签名,浏览器直传 其他语言的范例地址:https://help.aliyun.com/document ...
- 上传图片到阿里云OSS和获取上传图片的外网url的步骤
啥都不说 直接上代码 1.html: <form action="/bcis/api/headImgUpload.json" method="post" ...
- swift3.0 从相册选取或者拍照上传图片至阿里云OSS
导入相应的库 import Photos import AliyunOSSiOS 选取照片需要继承 UIImagePickerControllerDelegate,UINavigationContro ...
- multipartUpload上传图片到阿里云
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java中使用RestFul接口上传图片到阿里云OSS服务器
1.接口方法 import java.io.IOException; import javax.servlet.http.HttpServletRequest; import org.springfr ...
- 阿里OSS前端直传
第一次写博客,如有错误请多多指教. 先上代码吧: ossUpload = function (file, fun, funParameter) { //第一此请求后台服务器获取认证请求 $.ajax( ...
- 压缩并上传图片到阿里云(jfinal)
/** * 获取上传文件 * * @param r * @Return: com.oreilly.servlet.multipart.FilePart */public static FilePart ...
- 上传图片到阿里云oss
阿里云地址 登录阿里云管理控制台,创建对象存储oss private static final String endpoint = "http://oss-cn-shanghai.aliyu ...
随机推荐
- Win10 中修改cmd字体引发的问题
Win10 中修改cmd字体引发的问题 学习了:https://www.cnblogs.com/Diryboy/archive/2015/12/05/Use-Consolas-MSYaHei-in-C ...
- 在Linux中samba server的配置
1.查看是否安装samba服务 # rpm –qa |grep samba 2.若没安装,则安 # yum install samba 执行4次此命令 3.查看安装的samba文件 #rpm–qa | ...
- android中LocalBroadcastManager的使用
今天遇到一个acitivity之间通信的问题,因为我们是用TabActivity包裹了Activity(我们称之为A).所以这两个Activity是同一时候存在的.当在TabActivity中启动其它 ...
- Android应用开发-护眼提醒-总结篇
设计初衷: 在学习<第一行代码>的服务那章时,涉及到了alarmmanager的内容.然后笔者当时正好在关注"程序猿怎样保护眼睛"的问题. 于是便自己做了一个demo, ...
- 在Android系统中修改Android.mk使其同时编译rgb2565和rgb2888(向out/host/linux-x86/bin/下新增加一个工具命令)【转】
本文转载自:http://blog.csdn.net/mu0206mu/article/details/7514559 在Android系统中修改android.mk使其同时编译rgb2565和rgb ...
- 谷歌浏览器(chrome) —— 扩展应用程序
工具的使用--谷歌浏览器(chrome) (二) 1. 设置和下载方法 右上角菜单按钮 ⇒ 更多工具(more tools) ⇒ 扩展(Extensions) 打开该页面之后,会首先进入扩展(已安装应 ...
- H3C交换机DHCP Server配置的六个方面
H3C交换机DHCP Server配置的六个方面 在交换机上面配置DHCP内容是司空见惯的了.那么这里我们就讲解一下H3C交换机DHCP Server配置内容.之后的文章中,我们还对针对其他方面的配置 ...
- 跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例
跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...
- unity3d 让物体移动到点击位置
using UnityEngine; using System.Collections; public class test : MonoBehaviour { //在场景中鼠标点击地面后,角色可以移 ...
- 原型模式(Prototype)C++实现
意图:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 实用性:1.当要实例化的类是在运行时刻指定时. 2.为了避免创建一个与产品类层次平行的工厂类层次时. 3.当一个类的实例只能有几 ...