累的一批啊 被公司抓来写小程序 用uniapp~~~先上代码吧
初始化加载原先保存的 可删除可更新
image.png
<template>
<view class="grace-margin">
<form @submit="formSubmit" class="grace-form">
<view class="cu-bar bg-white margin-top">
<view >图片上传</view>
<!-- <view class="action">{{ imgList.length }}/3</view> -->
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="item.file">
<image :src="item.path" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length < 8"><text class="cuIcon-cameraadd"></text></view>
</view>
</view>
<view style="padding:22upx 0;">
<button formType="submit" type="primary" style="width:100%;text-align: center;background-color: #00CAAB;">提交</button>
</view>
</form>
</view>
</template>
------------------------------------------------------
data() {
return {
imgList: [],
token: 0,
user_info_id:0
}
},
components: {
uniNumberBox
},
onLoad: function(option) {
var that = this;
that.token = uni.getStorageSync('token');
uni.getStorage({
key: 'userinfo',
success: function(res) {
bofu.ajax('/home/client/getuserimg', {
user_info_id: res.data.user_info_id
}, function(res) {
if (res.data.code == 1) {
for (const key in res.data.data) {
that.imgList.push(res.data.data[key])
}
}
});
}
})
ChooseImage() {
var that = this;
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: '', 接口地址
filePath: tempFilePaths[0],
name: 'imgName',
header: {
'content-type': 'application/x-www-form-urlencoded',
'token': that.token
},
formData: {},
success: (uploadFileRes) => {
console.log('uploadFileRes');
console.log(uploadFileRes);
console.log(uploadFileRes.data);
uploadFileRes.data = JSON.parse(uploadFileRes.data).data;
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat({
path: chooseImageRes.tempFilePaths,
url: uploadFileRes.data
})
} else {
this.imgList = [{
path: chooseImageRes.tempFilePaths,
url: uploadFileRes.data
}]
}
}
});
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '删除',
content: '确定要删除这张图片吗？',
cancelText: '再看看',
confirmText: '删除',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1);
}
}
});
},
gohome(e) {
uni.navigateTo({
url: '../../pages/index/my',
// 跳转成功后刷新
success: function(e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
});
},
// console.log(that.imgList[i].url);
// student_card.push(that.imgList[i].url)
formSubmit: function(e) {
console.log('图');
var that = this
console.log(that.imgList);
var student_card = [];
for (var i in that.imgList) {
//////////////////////////////////////////////////////
if(that.imgList[i].url){
student_card.push(that.imgList[i].url)
}else{
student_card.push(that.imgList[i].path)
}
};
// console.log(student_card);
// return;
uni.getStorage({
key: 'userinfo',
success: function(res) {
bofu.ajax('/home/client/updateuserImg', {
user_info_id: res.data.user_info_id,
student_card:student_card
}, function(res) {
// console.log(res.data,'aaaaaa')
if(res.data.code==1){
uni.showToast({
title: '提交成功~',
icon: 'none'
});
setTimeout(function() {
that.gohome()
}, 1000);
}else{
uni.showToast({
title: '操作失敗',
icon: 'none'
});
}
});
}
})
网友评论