ElementUI的Upload上传,配合七牛云储存图片
七牛云服务器的储存区域
存储区域 | 地域简称 | 上传域名 |
---|---|---|
华东 | z0 | 服务器端上传:http(s)://up.qiniup.com
|
华东 | z0 | 客户端上传: http(s)://upload.qiniup.com
|
华北 | z1 | 服务器端上传:http(s)://up-z1.qiniup.com
|
华北 | z1 | 客户端上传: http(s)://upload-z1.qiniup.com
|
华南 | z2 | 服务器端上传:http(s)://up-z2.qiniup.com
|
华南 | z2 | 客户端上传: http(s)://upload-z2.qiniup.com
|
北美 | na0 | 服务器端上传:http(s)://up-na0.qiniup.com
|
北美 | na0 | 客户端上传: http(s)://upload-na0.qiniup.com
|
东南亚 | as0 | 服务器端上传:http(s)://up-as0.qiniup.com
|
东南亚 | as0 | 客户端上传: http(s)://upload-as0.qiniup.com
|
<template>
<div class="container">
<div class="title"><h2>ElementUI的Upload上传图片到七牛云</h2></div>
<el-upload
class="upload-demo"
drag
:action="upload_qiniu_url"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:on-error="handleError"
:before-upload="beforeAvatarUpload"
:data="qiniuData">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<div v-else class="el-default">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2MB</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
qiniuData: {
key: "",
token: ""
},
// 七牛云上传储存区域的上传域名(华东、华北、华南、北美、东南亚)
upload_qiniu_url: "http://upload-z1.qiniup.com",
// 七牛云返回储存图片的子域名
upload_qiniu_addr: "http://abc.clouddn.com/",
imageUrl: "",
Global: {
dataUrl: 'http://yoursite.com'
}
};
},
created() {
this.getQiniuToken();
},
methods: {
getQiniuToken: function() {
const _this = this;
this.$axios
.post(this.Global.dataUrl + "/qiniu/uploadToken")
.then(function(res) {
console.log(res);
if (res.data.success) {
_this.qiniuData.token = res.data.result;
} else {
_this.$message({
message: res.data.info,
duration: 2000,
type: "warning"
});
}
});
},
beforeAvatarUpload: function(file) {
this.qiniuData.key = file.name;
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) {
this.$message.error("图片只能是 JPG/PNG 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("图片大小不能超过 2MB!");
return false;
}
},
handleAvatarSuccess: function(res, file) {
this.imageUrl = this.upload_qiniu_addr + res.key;
console.log(this.imageUrl);
},
handleError: function(res) {
this.$message({
message: "上传失败",
duration: 2000,
type: "warning"
});
}
}
};
</script>
<style scode>
.title{
margin:90px 0 40px 0;
}
.el-default .el-icon-upload {
margin-top: 125px;
}
.el-upload-dragger {
width: 350px;
height: 350px;
}
.avatar {
width: 350px;
height: 350px;
display: block;
}
</style>
来源:https://segmentfault.com/a/1190000016309473
ElementUI的Upload上传,配合七牛云储存图片的更多相关文章
- 阿里云CentOS自动备份MySql 8.0并上传至七牛云
本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- .Net Core实现将文件上传到七牛云存储
功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qini ...
- laravel7文件上传至七牛云并保存在本地图片
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...
- 微信小程序文件上传至七牛云(laravel7)
1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...
- vue图片上传到七牛云
代码: <template> <div class="upload-info"> <div> <el-upload class=" ...
- Element-UI中Upload上传文件前端缓存处理
Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性.但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件 ...
- Tp3.1 文件上传到七牛云
TP3.1 中不支持Composer 就无法用composer 安装 下载历史的SDK https://github.com/qiniu/php-sdk/releases/tag/v7.0.8 下载下 ...
- tp5 webupload文件上传至七牛云
1:composer安装: composer require qiniu/php-sdk 2: 配置使用: 在tp5.1的配置文件app.php中配置七牛云的参数 'qiniu' => [ 'a ...
随机推荐
- 如何快速下载maven依赖jar包
找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...
- CSS选择器与XPath语言
一 在爬取页面信息的过程中,需要到想要的信息进行定位,主要有两种方法.CSS选择器和XPath语言.查找某一个标签,两种方法都可以做到. 二 CSS选择器 http://www.w3school.co ...
- LeetCode OJ--Implement strStr()
http://oj.leetcode.com/problems/implement-strstr/ 判断一个串是否为另一个串的子串 比较简单的方法,复杂度为O(m*n),另外还可以用KMP时间复杂度为 ...
- Linux,以逗号为分隔符,打印文件file.txt中的第一个和第三个字符
https://zhidao.baidu.com/question/1883257355267391828.html
- android widgets控件
1.TextView 类似,C#里的lable,显示一段文本 <TextView android:id="@+id/textView2" android:layout_wid ...
- 2017 ACM/ICPC 广西邀请赛 题解
题目链接 Problems HDOJ上的题目顺序可能和现场比赛的题目顺序不一样, 我这里的是按照HDOJ的题目顺序来写的. Problem 1001 签到 #include <bits/std ...
- [bzoj1018][SHOI2008]堵塞的交通traffic_线段树
bzoj-1018 SHOI-2008 堵塞的交通traffic 参考博客:https://www.cnblogs.com/MashiroSky/p/5973686.html 题目大意:有一天,由于某 ...
- windows下安装python、环境设置、多python版本的切换、pyserial与多版本python安装、windows命令行下切换目录
1.windows下安装python 官网下载安装即可 2.安装后的环境设置 我的电脑--属性--高级--设置path的地方添加python安装目录,如C:\Python27;C:\Python33 ...
- github/gitlab ssh-keys全局唯一
我们知道,通过在gitlab.github上设置ssh-key,可以直接拉取代码:git clone …… 公司为了代码安全,会对代码访问权限进行控制,不同人有不同代码的访问权限. 有时候,为了临时获 ...
- SolidEdge 如何绘制零件图的剖视图
1 点击检视-剖面,然后选择剖切面 2 比如要全剖,则绘制好方框之后点返回,选择方向. 选择剖切深度,然后预览即可 一个零件可以进行多次剖切