【01】搭建好页面结构、定义数据与接口

<el-upload
method="post"
ref="upload"
:action="domain"
:data="QiniuData"
multiple
:on-exceed="handleExceed"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload"
:on-error="uploadError"
:on-success="uploadSuccess"
:limit="3"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary" style="margin-top: 15px;">选取图片</el-button>
<el-button style="margin-left: 10px;margin-top: 15px;" size="small" type="submit" @click="handleSubmit">上传图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
 

data() {
return {
QiniuData: {
key: '',
token: ''
},
domain: 'http://upload.qiniu.com/',
info: {
AccessKey: 'AKKKKKKKKKKKKKKKK',
SecretKey: 'SKKKKKKKKKKKKKKKK',
Bucket: '七牛存储空间名'
},
uploadPicUrl: '',
fileList: []
}
},

// 上传图片张数限制
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 张图片,如需更换,请删除上一张图片在重新选择!`
)
},

// 确认是否删除准备上传的图片
beforeRemove(file, fileList) {
return this.$confirm(`确定移除${file.name}?`)
},

// 处理删除事件
handleRemove(file, fileList) {
this.uploadPicUrl = ''
},

// 上传前检测图片格式是否符合提交要求
beforeAvatarUpload(file) {
console.log(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
}
// 检测完成后,将文件名拼接上随机数前缀,保存到QiniuData.key中
var randPrefix = this.getNum()
this.QiniuData.key = randPrefix + '_' + `${file.name}`
},

// 上传成功后执行的回调函数,上传七牛云后可以在这里面得到key和hash
uploadSuccess(response, file, fileList) {
this.uploadPicUrl = '七牛云外链默认域名/' + `${response.key}`
console.log('上传成功!')
console.log('hash:' + response.hash)
console.log('资源链接:' + this.uploadPicUrl)
},

uploadError(response, file, fileList) {
this.$message({
message: '上传出错!',
type: 'error',
center: true
})
}
 

【02】从后端获取上传凭证token

mounted() {
this.getQiniuToken()
},

methods: {
getQiniuToken() {
this.$http.post('后端接口地址', this.info)
.then(response => {
// console.log(JSON.stringify(response))
if (response.data.Code === 200) {
console.log('获取token成功!')
this.QiniuData.token = response.data.Data.token
} else {
this.$message({
message: '获取token失败!' + response.data.Message,
type: 'error',
center: true
})
}
})
.catch(error => {
this.$message({
message: '获取token异常!' + error,
type: 'error',
center: true
})
})
}
 

【03】拼接随机数产生新的图片名称key

getNum() {
var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
var nums = ''
for (var i = 0; i < 32; i++) {
var id = parseInt(Math.random() * 61)
nums += chars[id]
}
return nums
},
拼接上文件名
var randPrefix = this.getNum()
this.QiniuData.key = randPrefix + '_' + `${file.name}`
 

【04】提交数据到七牛云服务器

handleSubmit() {
console.log('开始上传……')
console.log(this.QiniuData)
this.$refs.upload.submit()
},

<el-upload></el-upload>组件上传图片到七牛云的更多相关文章

  1. ueditor上传图片到七牛云存储(form api,java)

    转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...

  2. 上传图片到七牛云(服务端 node.js sdk)

    大体思路 前端要上传图片到七牛云,需要有一个token进行授权操作,而获取这个上传的upload token(以下简称upToken),在服务端需要一定的身份校验,比如说:只有登录的vip用户才能拿到 ...

  3. TP5上传图片到七牛云,并且删除七牛云的图片

    一,通过composer 下载七牛云 sdk composer require qiniu/php-sdk 二,手动下载七牛云sdk 1,https://developer.qiniu.com/kod ...

  4. js上传图片到七牛云存储

    项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...

  5. UEditor上传图片到七牛云储存(java)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  6. 上传图片到七牛云(客户端 js sdk)

    大体思路 上一篇我们讲了如何通过服务器生成一个upToken,那前端拿到这个token后又该如何操作?在这里我给出一个相当简洁的版本. 首先我们来看一下上传的思路:调用七牛模块的upload方法,生成 ...

  7. elementui上传图片到七牛云服务器

    注册七牛云 首先,注册七牛云,并且完成实名认证,完成后会在个人中心->秘钥管理中看到两个秘钥AccessKey/SecretKey 创建存储空间(必须要实名认证) 生成上传凭证 为了实现上传,我 ...

  8. UEditor上传图片到七牛云储存(c#)

    我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...

  9. 在node中使用promise上传图片到七牛云

    为了分摊个人服务器压力.提升图片下载上传的速度,使用七牛云保存用户上传的图片. 后台基于express搭建的,上传使用七牛云第三方nodejs-sdk.由于七牛云上传图片只能单个进行,并且考虑到上传完 ...

随机推荐

  1. 【转载】Sqlserver数据库中无自增Id的情况下使用ROW_NUMBER()函数进行数据分页

    在Sqlserver数据库中,如果查询表中含有自增长Id列,一般会采用select Top的方式来数据的分页操作.而实际上很多数据表设计的时候,不一定含有自增长Id列,那么数据库没有Id自增列的时候要 ...

  2. 【转】IIS上的反向代理

    http://blog.csdn.net/yuanguozhengjust/article/details/23576033 一直说在IIS上做反向代理,由于沉迷在nginx一行指令完事的美好情景当中 ...

  3. MVC开发模式简述

    了解MVC开发模式,首先我们要了解一下发展趋势 一.什么是软件设计 Jack W.Reeves 于14年前(1992年),就在其撰写的论文——<What is Software Design&g ...

  4. flex-手机端主页布局实例---构造页面结构

    Flexbox页面布局实例,成本效果图如下, 源码下载在最下面. 源码下载:https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w  提取码:wiyc样本地址: ...

  5. 生鲜配送管理系统_升鲜宝V2.0 供应商协同系统设计思想及设计效果展现(一)

    生鲜配送管理系统[升鲜宝]V2.0 供应商协同系统小程序设计思想及操作说明(一)     生鲜供应链企业,最重要的二个方面,其中一个是客户服务(销售订单)    另外一个就是供应商的管控,只有做好了这 ...

  6. Java-获取年月日对应的天干地支

    一.概述 本次是以java语言开发为例,计算出年月日对应的天干地支. 二.代码 public class MyDate { /** * 对于年月日的天干地支 */ private int year_g ...

  7. Java的SSH框架整合

    写了好多篇的Android代码了,在写几篇关于Java的,博客园里肯定都是java的前辈啊,写的不好多给意见. SSH,什么是SSH呢,Struts+Spring+Hibernate,这三个就是整个的 ...

  8. Oracle 时间字段显示不正确,类型错误

    一.知识点 给Oracle的date类型字段设置默认值[设置为当前时间] to_date(to_char(sysdate,'yyyy-mm-dd hh24:mi:ss'),'yyyy-mm-dd hh ...

  9. jsp:set/getProperty底层实现的探究

    关于jsp:set/getProperty底层实现的探究 今天上课讲到<jsp:useBean>时涉及到了<jsp:setProperty>和<jsp:getProper ...

  10. Java数据解析之JSON

    文章大纲 一.JSON介绍二.常见框架介绍与实战三.Studio中GsonFormat插件使用四.项目源码下载(含参考资料)五.参考文档   一.JSON介绍 1. 简介   JSON 的全称是 Ja ...