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