1.获取token值

后台有接口调用直接返回token值

  1. //请求后台拿七牛云token
  2. async getQiniuToken() { //token
  3. let uploadtoken = await
  4. this.Fetch("/osg/resource/uploadtoken/image", {
  5. method: "get",
  6. });
  7. console.log(uploadtoken);
  8. //赋值保存在本地
  9. this.QiniuData.token= uploadtoken.data.token
  10. },

2.贴上页面代码

  1. <template>
  2. <div class="upload-info">
  3. <div>
  4. <el-upload
  5. class="upload-pic"
  6. :action="domain"
  7. :data="QiniuData"
  8. :on-remove="handleRemove"
  9. :on-error="uploadError"
  10. :on-success="uploadSuccess"
  11. :before-remove="beforeRemove"
  12. :before-upload="beforeAvatarUpload"
  13. :limit="3"
  14. multiple
  15. :on-exceed="handleExceed"
  16. :file-list="fileList"
  17. >
  18. <el-button size="small" type="primary">选择图片</el-button>
  19. </el-upload>
  20. <div>
  21. <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
  22. </div>
  23. </div>
  24. <div>
  25. <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
  26. <el-button type="info" plain >取消</el-button>
  27. </div>
  28. </div>
  29. </template>
  30.  
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. loading: false,
  36. QiniuData: {
  37. key: "", //图片名字处理
  38. token: "" ,//七牛云token
  39. data:{}
  40. },
  41. domain: "http://upload.qiniup.com", // 七牛云的上传地址(华东区)
  42. qiniuaddr: "http://image.********.cn", // 七牛云的图片外链地址 七牛云空间的外链地址
  43. uploadPicUrl: "", //提交到后台图片地址
  44. fileList: []
  45. };
  46. },
  47. mounted() {
  48. this.getQiniuToken();
  49. },
  50. methods: {
  51. handleRemove(file, fileList) {
  52. this.uploadPicUrl = "";
  53. },
  54. handleExceed(files, fileList) {
  55. this.$message.warning(
  56. `当前限制选择 3 张图片,如需更换,请删除上一张图片在重新选择!`
  57. );
  58. },
  59. beforeAvatarUpload(file) { //图片上传之前的方法
  60. // const isPNG = file.type === "image/png";
  61. // const isJPEG = file.type === "image/jpeg";
  62. // const isJPG = file.type === "image/jpg";
  63. // const isLt2M = file.size / 1024 / 1024 < 2;
  64.  
  65. // if (!isPNG && !isJPEG && !isJPG) {
  66. // this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
  67. // return false;
  68. // }
  69. // if (!isLt2M) {
  70. // this.$message.error("上传头像图片大小不能超过 2MB!");
  71. // return false;
  72. // }
  73. this.QiniuData.data = file;
  74. this.QiniuData.key = `${file.name}`;
  75. console.log(this.QiniuData.key)
  76. },
  77. uploadSuccess(response, file, fileList) { //图片上传成功的方法
  78. console.log(fileList);
  79. console.log(response);
  80. console.log(file);
  81. this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
  82. },
  83. uploadError(err, file, fileList) { //图片上传失败时调用
  84. this.$message({
  85. message: "上传出错,请重试!",
  86. type: "error",
  87. center: true
  88. });
  89. },
  90. beforeRemove(file, fileList) {
  91. // return this.$confirm(`确定移除 ${ file.name }?`);
  92. },
  93. //提交数据到后台
  94. handleSubmit() {
  95.  
  96. },
  97. //请求后台拿七牛云token
  98. async getQiniuToken() { //token
  99. let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {
  100. method: "get",
  101. });
  102. console.log(uploadtoken);
  103. this.QiniuData.token= uploadtoken.data.token
  104. },
  105. }
  106. };
  107. </script>

3.起初也是毫无头绪,看文档,看博客,如有雷同,纯属借鉴!

vue项目中使用element ui上传图片到七牛的更多相关文章

  1. 在Vue项目中使用Element UI:按需引入和完整引入

    下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...

  2. php项目中使用element.ui和vue

    1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...

  3. 如何在Vue项目中使用Element组件

    [前提] 1.安装webpack    cnpm install webpack -g 2.安装vue/vue-cli    cnpm install vue vue-cli -g 3.初始化vue  ...

  4. vue项目中使用element的dialog中引入ztree却不能初始化解决办法

    一开始我在 里边写的,发现获取不到,那么采用dialog自带的回调函数,窗口打开后opend进行处理, 结果:

  5. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  6. 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'

    canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...

  7. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  8. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  9. Vue项目的创建和UI资源

    Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...

随机推荐

  1. 利用视频解析网站免费观看各大平台VIP电影

    需求: 观看VIP电影.VIP电视 准备: 1.视频解析网站 2.VIP电影URL 教程开始: 1.百度搜索[视频解析],会索引出大量的视频解析网站,随便选择一个网站. 2.找到想观看的VIP视频,复 ...

  2. SpringBoot、Spring MVC报错:Unable to create requested service [org.hibernate.engine.jdbc.env.spi.JdbcEnvironment]

    出现问题的原因: jdbc配置不正确 解决方案: 1.检查是否已添加数据库驱动jar包 2.检查数据库服务是否启动 3.检查数据库配置文件 主要为:dialect,driver_class,url,u ...

  3. 苹果系统iOS、macOS应用管理机制

    iOS.macOS系统应用管理机制 苹果系统包括:iOS.macOS.watchOS.tvOS.应用软件的生命周期为:开发.上线.安装.使用.卸载.这篇文档将从应用生命周期的各个环节介绍苹果系统对应用 ...

  4. 20191223-python学习第三天

    1.运算符补充 (1)in 与 not  in 学习 (2)优先级 >小于 ,<小于,计算运算关系优先级 > not > and > or 2.charm自动生成文件头部 ...

  5. linux中的正则表达式知识梳理

    1. 正则表达式 1.1 正则表达式使用 正则表达式是开发者为了处理大量的字符串和文本而定义的一套规则和方法,使用正则表达式可以提高效率,快速获取想要的内容. 正则表达式常用于linux三剑客grep ...

  6. idea springboot 使用JRebel热部署

    1.首先在idea中下载jrebel.由于已经下载过了.上这样 2.下载jrebel破解插件 https://gitee.com/gsls200808/JrebelLicenseServerforJa ...

  7. 献给即将35岁的初学者,焦虑 or 出路?

    导言:“对抗职场“35 岁焦虑”,也许唯一的方法是比这个瞬息万变的商业社会跑得更快!” 一直以来,都有许多人说“程序员或测试员是个吃青春饭的职业”,甚至还有说“35 岁混不到管理就等于失业”的言论. ...

  8. 为什么我不建议在C#中用下划线_开头来表示私有字段

    我在C#官方文档的使用属性里看到这种代码: public class Date { private int _month = 7; // Backing store public int Month ...

  9. C# 制作关键字醒目显示控件

    实现方式:WinForm自定义控件,继承系统Label控件实现. 第1步:创建“组件”,取名为:MarkLabel     第2步:修改添加如下代码: /* 添加命名空间引用: * using Sys ...

  10. 使用jdbc将mysql数据库中的内容封装为指定对象的list集合

    使用jdbc将mysql数据库中的内容封装为指定对象的list集合 public List<User> findAll() { private JdbcTemplate template ...