组件上传图片到七牛云

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

},