109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
||
<view>
|
||
<u-navbar :is-back="true" title='上传' title-color="#000" :border-bottom="false" :background="true" id="navbar">
|
||
</u-navbar>
|
||
<!-- 111 -->
|
||
<button @click="btn()">上传图片</button>
|
||
<view style="width: 750rpx;height: 750rpx;">
|
||
<image :src="item" v-for="(item,index) in imglist" :key="index" style="width: 750rpx;height: 750rpx;">
|
||
</image>
|
||
</view>
|
||
|
||
<button @click="select">选择图片</button>
|
||
<image mode="widthFix" :src="path" />
|
||
<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url"
|
||
@cancel="oncancel" @ok="onok"></ksp-cropper>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imglist: [],
|
||
token: '',
|
||
url: "",
|
||
path: ""
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getQiniuToken()
|
||
},
|
||
methods: {
|
||
select() {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (rst) => {
|
||
// 设置url的值，显示控件
|
||
this.url = rst.tempFilePaths[0];
|
||
}
|
||
})
|
||
},
|
||
onok(ev) {
|
||
this.url = "";
|
||
this.path = ev.path;
|
||
let math = 'static/' + this.$u.guid(20)
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: this.path,
|
||
formData: {
|
||
token: this.token, //后端返回的token
|
||
key: 'smartmeter/img/' + math
|
||
},
|
||
success: function(res) {
|
||
let str = JSON.parse(res.data)
|
||
console.log(str.key)
|
||
this.userImgs = 'https://api.ccttiot.com/' + str.key
|
||
console.log(this.userImgs,'101010')
|
||
}
|
||
})
|
||
},
|
||
oncancel() {
|
||
// url设置为空，隐藏控件
|
||
this.url = ""
|
||
},
|
||
|
||
btn() {
|
||
let _this = this
|
||
let math = 'static/' + _this.$u.guid(20)
|
||
uni.chooseMessageFile({
|
||
count: 10,
|
||
type: 'all',
|
||
success(res) {
|
||
const tempFilePaths = res.tempFiles
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: tempFilePaths[0].path,
|
||
formData: {
|
||
token: _this.token, //后端返回的token
|
||
key: 'smartmeter/img/' + math
|
||
},
|
||
success: function(res) {
|
||
console.log(res, 'resres');
|
||
let str = JSON.parse(res.data)
|
||
console.log(str.key)
|
||
_this.userImgs = 'https://api.ccttiot.com/' + str.key
|
||
console.log(_this.userImgs)
|
||
_this.imglist.push(_this.userImgs)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取上传七牛云token
|
||
getQiniuToken() {
|
||
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.token
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style> |