1.获取token值

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

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

2.贴上页面代码

<template>
<div class="upload-info">
<div>
<el-upload
class="upload-pic"
:action="domain"
:data="QiniuData"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload"
:limit="3"
multiple
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">选择图片</el-button>
</el-upload>
<div>
<img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
</div>
</div>
<div>
<el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
<el-button type="info" plain >取消</el-button>
</div>
</div>
</template> <script>
export default {
data() {
return {
loading: false,
QiniuData: {
key: "", //图片名字处理
token: "" ,//七牛云token
data:{}
},
domain: "http://upload.qiniup.com", // 七牛云的上传地址(华东区)
qiniuaddr: "http://image.********.cn", // 七牛云的图片外链地址 七牛云空间的外链地址
uploadPicUrl: "", //提交到后台图片地址
fileList: []
};
},
mounted() {
this.getQiniuToken();
},
methods: {
handleRemove(file, fileList) {
this.uploadPicUrl = "";
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 张图片,如需更换,请删除上一张图片在重新选择!`
);
},
beforeAvatarUpload(file) { //图片上传之前的方法
// const isPNG = file.type === "image/png";
// const isJPEG = file.type === "image/jpeg";
// const isJPG = file.type === "image/jpg";
// const isLt2M = file.size / 1024 / 1024 < 2; // if (!isPNG && !isJPEG && !isJPG) {
// this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
// return false;
// }
// if (!isLt2M) {
// this.$message.error("上传头像图片大小不能超过 2MB!");
// return false;
// }
this.QiniuData.data = file;
this.QiniuData.key = `${file.name}`;
console.log(this.QiniuData.key)
},
uploadSuccess(response, file, fileList) { //图片上传成功的方法
console.log(fileList);
console.log(response);
console.log(file);
this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
},
uploadError(err, file, fileList) { //图片上传失败时调用
this.$message({
message: "上传出错,请重试!",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
// return this.$confirm(`确定移除 ${ file.name }?`);
},
//提交数据到后台
handleSubmit() { },
//请求后台拿七牛云token
async getQiniuToken() { //token
let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {
method: "get",
});
console.log(uploadtoken);
this.QiniuData.token= uploadtoken.data.token
},
}
};
</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. Mysql设置创建时间字段和更新时间字段自动获取时间,填充时间

    1.引言在实际开发中,每条数据的创建时间和修改时间,尽量不需要应用程序去记录,而由数据库获取当前时间自动记录创建时间,获取当前时间自动记录修改时间. 2.创建语句(1)–添加CreateTime 设置 ...

  2. ArtiPub:一款开源的一文多发平台

    文章来自我的博客:https://blog.ljyngup.com/archives/705.html/ 看到感觉挺有意思的,有空找个空闲的VPS搭建一下. 转自官方Github仓库 ArtiPub ...

  3. 吴恩达deepLearning.ai循环神经网络RNN学习笔记_没有复杂数学公式,看图就懂了!!!(理论篇)

    本篇文章被Google中国社区组织人转发,评价: 条理清晰,写的很详细! 被阿里算法工程师点在看! 所以很值得一看! 前言 目录: RNN提出的背景 - 一个问题 - 为什么不用标准神经网络 - RN ...

  4. k8s系列----索引

    day1:k8s集群准备搭建和相关介绍 day2:k8spod介绍与创建 day3:k8sService介绍及创建 day4:ingress资源和ingress-controller day5:存储卷 ...

  5. Vscode开发Python环境安装

    VSCode 开发 Python 使用python,主要是做一些工具和爬虫的操作,语法简单,功能复杂,入手很快. 我们通过在 VSCode 中搜索 Python 插件,发现,开发 python 的话, ...

  6. drf序列化高级、自定义只读只写、序列化覆盖字段、二次封装Response、数据库查询优化(断关联)、十大接口、视图家族

    目录 自定义只读 自定义只写 序列化覆盖字段 二次封装Response 数据库关系分析 断外键关联关系 ORM操作外键关系 ORM四种关联关系 基表 系列化类其他配置(了解) 十大接口 BaseSer ...

  7. Node.js的__dirname,__filename,process.cwd(),./的一些坑

    参考博客:https://github.com/jawil/blog/issues/18

  8. 死磕Lambda表达式(一):初识Lambda

    弱小和无知不是生存的障碍,傲慢才是.--<三体> 什么是Lambda表达式 Lambda表达式是表示可传递匿名函数的一种简洁方式,Lambda表达式没有名称,但是有参数列表.函数主体.返回 ...

  9. redis中key键操作

    keys */查看所有的key remoteSelf:1>select 0 "OK" remoteSelf:0>keys * 1) "SUBCRIBEMAP& ...

  10. 万科A顺利出局,布局一心堂

    万科的这两日的走势还不错,今日冲高回落,顺利出局. 那么有选中了一只 股票    一心堂 资金量W    12 建仓价格    22.2 加仓系数    1.5 加仓间隔    1.50% 总盈利比  ...