<el-upload></el-upload>组件上传图片到七牛云

【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()
},

转载于:https://www.cnblogs.com/mobaiyu/p/10579270.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值