vue图片上传到七牛云
代码:
<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=""
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
},
domain: "https://upload-z2.qiniup.com", // 七牛云的上传地址(华南区)
qiniuaddr: "http://xxxx.com", // 七牛云的图片外链地址
uploadPicUrl: "", //提交到后台图片地址
fileList: []
};
},
mounted() {
this.getQiniuToken();
},
methods: {
handleRemove(file, fileList) {
this.uploadPicUrl = "";
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 张图片,如需更换,请删除上一张图片在重新选择!`
);
},
beforeAvatarUpload(file) {
const isPNG = file.type === "image/png";
const isJPEG = file.type === "image/jpeg";
const isJPG = file.type === "image/jpg";
const isLt2M = file.size / / < ; if (!isPNG && !isJPEG && !isJPG) {
this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
return false;
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
return false;
}
this.QiniuData.key = `upload_pic_${file.name}`;
},
uploadSuccess(response, file, fileList) {
console.log(fileList);
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() {
let ajaxData = {
receipt_img: this.uploadPicUrl //图片地址
};
this.$http.put("/xxx", ajaxData)
.then(response => {
let { code, data } = response.data;
if (code == "") {
this.$message({
message: "提交成功!",
type: "success",
center: true
});
}
})
.catch(error => {
this.$message({
message: error.msg,
type: "error",
center: true
});
});
},
//请求后台拿七牛云token
getQiniuToken() {
this.$http.get("/xxx")
.then(response => {
let { code, data } = response.data;
if (code == "") {
this.QiniuData.token = data;
}
})
.catch(error => {});
}
}
};
</script>
vue图片上传到七牛云的更多相关文章
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- KindEditor图片上传到七牛云
自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...
- django + ckeditor + 七牛云,图片上传到七牛云
传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.
- 图片上传到七牛云/阿里云的OSS
1.准备 七牛云/阿里云OSS https://github.com/pfinal/storage 2.composer安装包 安装 composer require pfinal/storage 本 ...
- laravel7文件上传至七牛云并保存在本地图片
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...
- 微信小程序文件上传至七牛云(laravel7)
1 wxml: <view> <form bindsubmit="dopost"> <view> <label>真实姓名</l ...
- .Net Core实现将文件上传到七牛云存储
功能:将图片上传到七牛云存储 准备工作 注册七牛账号,提交实名认证(基本上1天内内审核通过) 登录七牛后台->对象存储->新建空间 (基本概念:https://developer.qini ...
- 阿里云CentOS自动备份MySql 8.0并上传至七牛云
本文主要介绍一下阿里云CentOS7下如何对MySql 8.0数据库进行自动备份,并使用.NET Core 将备份文件上传至七牛云存储上,并对整个过程所踩的坑加以记录. 环境.工具.准备工作 服务器: ...
- tp5 webupload文件上传至七牛云
1:composer安装: composer require qiniu/php-sdk 2: 配置使用: 在tp5.1的配置文件app.php中配置七牛云的参数 'qiniu' => [ 'a ...
随机推荐
- 【译】索引进阶(八):SQL SERVER唯一索引
[译注:此文为翻译,由于本人水平所限,疏漏在所难免,欢迎探讨指正] 原文链接:传送门. 在本章节我们检查唯一索引.唯一索引的特别之处在于它不仅提供了性能益处,而且提供了数据完整性益处.在SQL SER ...
- 微信小程序开发之自定义菜单tabbar
做这个 遇到问题比较多,特此记录以便查看,直接上代码: 一.app.js 控制原有菜单隐藏.启用新菜单.菜单列表,集中在这里控制 hideTabBar这个很关键,解决苹果6S导致的双导航栏:原文htt ...
- 从头开始学Maven【依赖范围】
例如 <dependencies> <dependency> <groupId></groupId> <artifactId></ar ...
- 小程序:动态监测input和取值
1.输入框失去焦点取值 wxml: <input bindblur="tab" type='text'></input> js: tab:function( ...
- flutter 登录后跳转到根路由
flutter 登录以后 会有返回箭头显示 因为 路由的切换导致不是路由的第一个页面,解决办法清空路由. Navigator.of(context).pushAndRemoveUntil( new ...
- 出错:Failed to convert property value of type 'org.apache.ibatis.session.defaults.DefaultSqlSessionFactory' to required type 'java.lang.String' for property 'sqlSessionFactoryBeanName';
出错的详细信息: 3 ERROR [http-nio-80-exec-3] org.springframework.web.servlet.DispatcherServlet - Context in ...
- 记录一些 APM 仓储
记录地址,慢慢研究... https://github.com/openzipkin/zipkin https://github.com/apache/incubator-skywalki ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- tensorflow卷积神经网络-【老鱼学tensorflow】
前面我们曾有篇文章中提到过关于用tensorflow训练手写2828像素点的数字的识别,在那篇文章中我们把手写数字图像直接碾压成了一个784列的数据进行识别,但实际上,这个图像是2828长宽结构的,我 ...
- python函数默认参数陷阱
对于学习python的人都有这样的困惑 def foo(a=[]): a.append(5) return a Python新手希望这个函数总是返回一个只包含一个元素的列表:[5].结果却非常不同,而 ...