uniapp上传图片到七牛云
2023-12-30 15:28:41
<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>
文章来源:https://blog.csdn.net/weixin_61769998/article/details/135305649
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!