<template>
<view class="container">
<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @delete="deleteImg"
limit="9" />
</view>
</template>
<script>
export default {
data() {
return {
imageValue: [],
formData: {
'key': '',
'token': '',
},
};
},
onLoad(option) {
this.getToken()
},
methods: {
select(e) {
this.upload2qiniu(e.tempFiles[0])
},
deleteImg(e) {
},
async upload2qiniu(file) {
let timestamp = new Date().getTime().toString()
this.formData.key = file.name || timestamp
uni.uploadFile({
url: '七牛云上传接口',
filePath: file.path,
name: 'file',
formData: this.formData,
success: async (uploadFileRes) => {
let data = uploadFileRes.data
let key = JSON.parse(uploadFileRes.data).key || timestamp;
let url = '七牛云访问图片的域名路径' + key
this.uploadImg()
},
fail: (err) => {
uni.showModal({
title: err
})
}
});
},
getToken() {
let token = uni.getStorageSync("token");
const header = {
"Content-Type": "application/json",
"Authorization": token
};
uni.request({
url: '后端提供获取七牛云token接口',
data: {},
header: header,
timeout: 20000,
method: 'POST',
dataType: 'json',
success: (res) => {
this.formData.token = res.data
}
})
},
uploadImg() {
}
}
}
</script>
<style lang="scss">
.container {
width: 100vw;
height: 100vh;
background-color: #fff;
}
</style>