数据缓存和图片上传
一,数据缓存
1,uni.setStorage 存储数据
将数据存储在本地缓存中指定的 key 中,只能单条缓存
<template>
<view>
<button type="primary" @click="setstorage">存储数据</button>
</view>
</template>
<script>
export default {
methods: {
setstorage() {
uni.setStorage({
key: 'id',
data: 100,
success () {
console.log('存储成功')
}
})
}
}
}
</script>
2,多条数据缓存
setstorage(){
localStorage.setItem('time', 12);
localStorage.setItem('time1', 34)
console.log('success');
uni.setStorage({
key: 'key',
data:'hhh',
success: function () {
console.log('success');
}
})
uni.setStorageSync('storage_key', 'hello');
},
localStorage.setItem();uni.setStorage({}),uni.setStorageSync();都可缓存数据。localStorage.setItem()能够多条缓存数据。
3,uni.getStorage 获取数据
<template>
<view>
<button type="primary" @click="getStorage">获取数据</button>
</view>
</template>
<script>
export default {
data () {
return {
id: ''
}
},
methods: {
getStorage () {
uni.getStorage({
key: 'id',
success: res=>{
this.id = res.data
}
})
}
}
}
</script>
4,uni.removeStorage 移除数据
<template>
<view>
<button type="primary" @click="removeStorage">删除数据</button>
</view>
</template>
<script>
export default {
methods: {
removeStorage () {
uni.removeStorage({
key: 'id',
success: function () {
console.log('删除成功')
}
})
}
}
}
</script>
二,上传图片
1,上传,预览图片
<template>
<view class="content">
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" > </image>
</view>
</template>
<script>
export default {
data() {
return {
imgArr: []
}
},
onLoad() {
},
methods: {
chooseImg(){
uni.chooseImage({
count: 6, //默认9
success: res=>{
this.imgArr = res.tempFilePaths
}
});
},
previewImg(current){
console.log(current)
uni.previewImage({
current,
urls:this.imgArr
})
}
}
}
</script>
button产生 “chooseImg"点击事件,在method方法中调用 uni.chooseImage()方法,上传图片。
设置数组 imgArr ,在imgArr 数组中存放图片,v-for绑定事件 imgArr,通过src 渲染到image界面。
uni.previewImage({ }) 是预览图片,在image中绑定点击事件"previewImg(item)” 。