七牛云服务器的储存区域

存储区域 地域简称 上传域名
华东 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

  1. <template>
  2. <div class="container">
  3. <div class="title"><h2>ElementUIUpload上传图片到七牛云</h2></div>
  4. <el-upload
  5. class="upload-demo"
  6. drag
  7. :action="upload_qiniu_url"
  8. :show-file-list="false"
  9. :on-success="handleAvatarSuccess"
  10. :on-error="handleError"
  11. :before-upload="beforeAvatarUpload"
  12. :data="qiniuData">
  13. <img v-if="imageUrl" :src="imageUrl" class="avatar">
  14. <div v-else class="el-default">
  15. <i class="el-icon-upload"></i>
  16. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  17. </div>
  18. <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2MB</div>
  19. </el-upload>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. qiniuData: {
  27. key: "",
  28. token: ""
  29. },
  30. // 七牛云上传储存区域的上传域名(华东、华北、华南、北美、东南亚)
  31. upload_qiniu_url: "http://upload-z1.qiniup.com",
  32. // 七牛云返回储存图片的子域名
  33. upload_qiniu_addr: "http://abc.clouddn.com/",
  34. imageUrl: "",
  35. Global: {
  36. dataUrl: 'http://yoursite.com'
  37. }
  38. };
  39. },
  40. created() {
  41. this.getQiniuToken();
  42. },
  43. methods: {
  44. getQiniuToken: function() {
  45. const _this = this;
  46. this.$axios
  47. .post(this.Global.dataUrl + "/qiniu/uploadToken")
  48. .then(function(res) {
  49. console.log(res);
  50. if (res.data.success) {
  51. _this.qiniuData.token = res.data.result;
  52. } else {
  53. _this.$message({
  54. message: res.data.info,
  55. duration: 2000,
  56. type: "warning"
  57. });
  58. }
  59. });
  60. },
  61. beforeAvatarUpload: function(file) {
  62. this.qiniuData.key = file.name;
  63. const isJPG = file.type === "image/jpeg";
  64. const isPNG = file.type === "image/png";
  65. const isLt2M = file.size / 1024 / 1024 < 2;
  66. if (!isJPG && !isPNG) {
  67. this.$message.error("图片只能是 JPG/PNG 格式!");
  68. return false;
  69. }
  70. if (!isLt2M) {
  71. this.$message.error("图片大小不能超过 2MB!");
  72. return false;
  73. }
  74. },
  75. handleAvatarSuccess: function(res, file) {
  76. this.imageUrl = this.upload_qiniu_addr + res.key;
  77. console.log(this.imageUrl);
  78. },
  79. handleError: function(res) {
  80. this.$message({
  81. message: "上传失败",
  82. duration: 2000,
  83. type: "warning"
  84. });
  85. }
  86. }
  87. };
  88. </script>
  89. <style scode>
  90. .title{
  91. margin:90px 0 40px 0;
  92. }
  93. .el-default .el-icon-upload {
  94. margin-top: 125px;
  95. }
  96. .el-upload-dragger {
  97. width: 350px;
  98. height: 350px;
  99. }
  100. .avatar {
  101. width: 350px;
  102. height: 350px;
  103. display: block;
  104. }
  105. </style>

来源:https://segmentfault.com/a/1190000016309473

ElementUI的Upload上传,配合七牛云储存图片的更多相关文章

  1. 阿里云CentOS自动备份MySql 8.0并上传至七牛云

    本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...

  2. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  3. .Net Core实现将文件上传到七牛云存储

    功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qini ...

  4. laravel7文件上传至七牛云并保存在本地图片

    HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...

  5. 微信小程序文件上传至七牛云(laravel7)

    1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...

  6. vue图片上传到七牛云

    代码: <template> <div class="upload-info"> <div> <el-upload class=" ...

  7. Element-UI中Upload上传文件前端缓存处理

    Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性.但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件 ...

  8. Tp3.1 文件上传到七牛云

    TP3.1 中不支持Composer 就无法用composer 安装 下载历史的SDK https://github.com/qiniu/php-sdk/releases/tag/v7.0.8 下载下 ...

  9. tp5 webupload文件上传至七牛云

    1:composer安装: composer require qiniu/php-sdk 2: 配置使用: 在tp5.1的配置文件app.php中配置七牛云的参数 'qiniu' => [ 'a ...

随机推荐

  1. 如何快速下载maven依赖jar包

    找到settings.xml文件.在mirrors里面添加下面的代码: <mirror> <id>alimaven</id> <mirrorOf>cen ...

  2. CSS选择器与XPath语言

    一 在爬取页面信息的过程中,需要到想要的信息进行定位,主要有两种方法.CSS选择器和XPath语言.查找某一个标签,两种方法都可以做到. 二 CSS选择器 http://www.w3school.co ...

  3. LeetCode OJ--Implement strStr()

    http://oj.leetcode.com/problems/implement-strstr/ 判断一个串是否为另一个串的子串 比较简单的方法,复杂度为O(m*n),另外还可以用KMP时间复杂度为 ...

  4. Linux,以逗号为分隔符,打印文件file.txt中的第一个和第三个字符

    https://zhidao.baidu.com/question/1883257355267391828.html

  5. android widgets控件

    1.TextView 类似,C#里的lable,显示一段文本 <TextView android:id="@+id/textView2" android:layout_wid ...

  6. 2017 ACM/ICPC 广西邀请赛 题解

    题目链接  Problems HDOJ上的题目顺序可能和现场比赛的题目顺序不一样, 我这里的是按照HDOJ的题目顺序来写的. Problem 1001 签到 #include <bits/std ...

  7. [bzoj1018][SHOI2008]堵塞的交通traffic_线段树

    bzoj-1018 SHOI-2008 堵塞的交通traffic 参考博客:https://www.cnblogs.com/MashiroSky/p/5973686.html 题目大意:有一天,由于某 ...

  8. windows下安装python、环境设置、多python版本的切换、pyserial与多版本python安装、windows命令行下切换目录

    1.windows下安装python 官网下载安装即可 2.安装后的环境设置 我的电脑--属性--高级--设置path的地方添加python安装目录,如C:\Python27;C:\Python33 ...

  9. github/gitlab ssh-keys全局唯一

    我们知道,通过在gitlab.github上设置ssh-key,可以直接拉取代码:git clone …… 公司为了代码安全,会对代码访问权限进行控制,不同人有不同代码的访问权限. 有时候,为了临时获 ...

  10. SolidEdge 如何绘制零件图的剖视图

    1 点击检视-剖面,然后选择剖切面   2 比如要全剖,则绘制好方框之后点返回,选择方向.   选择剖切深度,然后预览即可   一个零件可以进行多次剖切