vue上传阿里云图片组件
首先需要弄一个阿里云存储。然后配置一下。前端就可以直接上传图片并回显。
可在父级组件定义上传图片类型以及大小。默认为500kb。样式可以自适应调整。
<template>
<div class="upLoat">
<a href="javascript:;" class="file">上传图片
<input type="file" :accept="typeArr" @change="upload($event)">
</a>
</div>
</template>
<script>
import {Toast} from 'mint-ui';
export default {
props : ['data', 'typeArr', 'size'],
data(){
return {
client : '',
fileSize: 500000
}
},
created(){
if (this.size) {
this.fileSize = this.size;
}
this.client = new OSS.Wrapper({
region : process.env.region,
secure : true,
accessKeyId : process.env.accessKeyId,
/*这两者到阿里云控制台获得*/
accessKeySecret: process.env.accessKeySecret,
bucket : process.env.bucket /*装图片的桶名*/
});
}, methods: {
/**上传图片**/
upload(event){
var self = this;
var file = event.target.files[0]; var type = file.name.split('.')[1];
var storeAs = this.getUuid() + '.' + 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.client.multipartUpload(storeAs, file).then(function (result) { self.data.url = result.res.requestUrls[0].split('?')[0]; }).catch(function (err) { console.log(err);
}); },
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(''); }
}
}
</script>
<style scoped lang="less"> .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>
父级组件:
<up-Load class="files" :data="item"
typeArr="image/png,image/jpg,image/gif,image/jpeg" size="50000"></up-Load>
全局引入 <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
vue上传阿里云图片组件的更多相关文章
- vue 上传进度显示
参考资料: https://ask.csdn.net/questions/767017 https://www.cnblogs.com/best-fyx/p/11363506.html 我使用的是el ...
- 百度editor调用【图片上传阿里云】
百度editor调用简单,但是图片和文件上传阿里云就有点难度了.下面我详细说一下. 百度富文本编辑器下载地址:http://ueditor.baidu.com/website/download.htm ...
- vue 上传文件 和 下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- vue 上传文件 和 下载文件 面试的时候被问到过
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码:html: <input type= ...
- 使用laravel-amdin调用文件上传阿里oss注意点
开发者工作中,项目代码开发提高效率,往往会使用一些github上面的一些扩展类,这里举例说明一下遇到的情况. 一.使用laravel-admin框架开发管理后台文件或者图片上传 情景:运营或者产品通过 ...
- 小程序--->小程序图片上传阿里OSS使用方法
小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...
- 微信小程序中图片上传阿里云Oss
本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...
- base64格式的图片上传阿里云
base64格式的图片上传阿里云 上传图片的时候,除了普通的图片上传,还有一张图片信息是以base64格式发送到后台的. 后台接受base64格式的图片,上传至阿里云代码:(主要是将base64转化成 ...
- sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')
上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock') <!-- * ...
随机推荐
- 【翻译自mos文章】OGG replicat 进程使用的 TCP port
OGG replicat 进程使用的 TCP port 来源于: TCP PORT USED BY REPLICAT PROCESSES (文档 ID 1060954.1) 适用于: Oracle G ...
- apple air装双系统(win7)
同事买了一个apple air.用不习惯,希望再装个win7,经过多次试验,得到例如以下操作方法: 1.在MAC系统里的"有用工具"中找到"Boot Camp 助理 ...
- C#之选择排序
算法描述 1.假定未排序序列中第一位为数组最小值,通过与后面的数值进行比较,找到未排序序列中最小值,与未排序序列第一位交换位置: 2.重复步骤一,对剩余未排序序列进行比较找出最小值,与未排序序列中第一 ...
- sql_server_action
''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 where 主键 not in(select top ...
- 技术的止境(客户价值第一,快速实现第二,边做边学,迅速成为牛人。紧贴客户的需求去做技术,立于不败之地。追求的目标:把一项产品去做好,用产品去养活自己和家人)good
作为一个依靠技术来谋生的程序员,我最近一直在思考一个问题,有限的生命里,面对无限的技术更新,我要研究到什么程度才能算是完成我的成为技术大牛的目标呢?换而言之,那就是技术的止境在哪儿呢?深入的思考下去, ...
- 【树剖求LCA】树剖知识点
不太优美但是有注释的版本: #include<cstdio> #include<iostream> using namespace std; struct edge{ int ...
- 【Codevs1288】埃及分数
Position: http://codevs.cn/problem/1288/ Description 在古埃及,人们使用单位分数的和(形如1/a的, a是自然数)表示一切有理数. 如:2/3=1/ ...
- perl数组的长度与元素个数
perl数组的长度与元素个数 $#数组名 ---表示数组中最后一个元素的下标,它等于元素个数减1. @数组名 ---表示数组中元素的个数. $标量=@数组名 ---将一个数组赋值给一个标量变量,标量得 ...
- AJAX json集合传入Controller后台
HTML代码 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- 【BZOJ2149】拆迁队(斜率优化DP+CDQ分治)
题目: 一个斜率优化+CDQ好题 BZOJ2149 分析: 先吐槽一下题意:保留房子反而要给赔偿金是什么鬼哦-- 第一问是一个经典问题.直接求原序列的最长上升子序列是错误的.比如\(\{1,2,2,3 ...