init
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-uploader": "@vant/weapp/uploader/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
/* components/uploadPic/uploadPic.wxss */
|
||||
.upload-container {
|
||||
.upload {
|
||||
// width: 100%;
|
||||
// margin-top: 8px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.upload-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
background: #ECF1FF;
|
||||
border-radius: 4px;
|
||||
border: 1px dashed #4381FC;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 16rpx 0 8rpx;
|
||||
}
|
||||
|
||||
.val {
|
||||
color: #4381FC;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.del {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
// components/uploadPic/uploadPic.ts
|
||||
import { postAction, upload } from '../../api/base';
|
||||
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
uploadUrl: {
|
||||
type: String,
|
||||
value: 'api/vehicles/accidentInfo/upload'
|
||||
},
|
||||
maxLength: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
picList: {
|
||||
type: Array,
|
||||
value: []
|
||||
}
|
||||
},
|
||||
observers: {
|
||||
picList: function (val: any, oVal: any) {
|
||||
// console.log(val,oVal)
|
||||
// if(val) {
|
||||
// this.setDate({
|
||||
// photoList: val
|
||||
// })
|
||||
// this.data.changePhotoList()
|
||||
// }
|
||||
}
|
||||
},
|
||||
attached() {
|
||||
// console.log(this.properties.picList)
|
||||
// this.setData({
|
||||
// photoList: this.properties.picList.value
|
||||
// })
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
photoList: []
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
ready: function () {
|
||||
console.log('上传ready', this.properties.picList);
|
||||
},
|
||||
methods: {
|
||||
// initPhotoList(list: any) {
|
||||
// console.log(list)
|
||||
// this.setData({
|
||||
// photoList: list
|
||||
// })
|
||||
// },
|
||||
choosePhoto() {
|
||||
console.log(this);
|
||||
let _this = this;
|
||||
if (this.data.photoList.length < this.properties.maxLength) {
|
||||
let maxCount;
|
||||
if (this.properties.maxLength - this.data.photoList.length >= 6)
|
||||
maxCount = 6;
|
||||
else maxCount = this.properties.maxLength - this.data.photoList.length;
|
||||
wx.chooseMedia({
|
||||
count: maxCount, // 最多同时选 6张
|
||||
mediaType: ['image'],
|
||||
success(res) {
|
||||
console.log(res);
|
||||
let { tempFiles } = res;
|
||||
tempFiles.forEach((item, index) => {
|
||||
_this.uploadImg(item.tempFilePath); // 循环执行上传放法，实现多张图片，同时上传
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: `最多上传${this.properties.maxLength}张图片`,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 选择本地图片
|
||||
uploadImg(imgSrcList: any) {
|
||||
console.log(imgSrcList);
|
||||
var that = this;
|
||||
let { photoList } = this.data;
|
||||
wx.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
});
|
||||
let parms = {
|
||||
name: 'file',
|
||||
filePath: imgSrcList
|
||||
};
|
||||
upload(this.properties.uploadUrl, parms)
|
||||
.then((res: any) => {
|
||||
let result = JSON.parse(res.data);
|
||||
if (result.code == 200) {
|
||||
// console.log(result);
|
||||
photoList.push(result.result);
|
||||
this.setData({
|
||||
photoList: photoList
|
||||
});
|
||||
this.returnPic();
|
||||
wx.hideLoading();
|
||||
} else {
|
||||
console.log('失败');
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: result.message,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
delImg(e: any) {
|
||||
let that = this;
|
||||
let { index } = e.currentTarget.dataset;
|
||||
let { photoList } = this.data;
|
||||
wx.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除当前照片',
|
||||
success(res) {
|
||||
if (res.confirm) {
|
||||
photoList.splice(index, 1);
|
||||
that.setData({
|
||||
photoList
|
||||
});
|
||||
that.returnPic();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
returnPic() {
|
||||
this.triggerEvent('returnPic', { photoList: this.data.photoList });
|
||||
},
|
||||
previewImg(e: any) {
|
||||
let { index } = e.currentTarget.dataset;
|
||||
let { photoList } = this.data;
|
||||
let list = [] as any;
|
||||
photoList.forEach((item: any) => {
|
||||
list.push(item.fileUrl);
|
||||
});
|
||||
wx.previewImage({
|
||||
current: list[index | 0], // 当前显示图片的http链接 默认urls[0]
|
||||
urls: list // 需要预览的图片http链接列表
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
<!--components/uploadPic/uploadPic.wxml-->
|
||||
<view class="upload-container">
|
||||
<view class="upload">
|
||||
<view class="upload-btn" wx:if="{{photoList.length < maxLength}}" bindtap="choosePhoto">
|
||||
<image src="../../images/icon_upload.png" mode=""/>
|
||||
<view class="val">上传图片</view>
|
||||
</view>
|
||||
<!-- 注意bindtap 和 catchtap的区别，catchtap可以阻止事件冒泡-->
|
||||
<view class="photo-list" wx:for="{{photoList}}" data-index="{{index}}" bindtap="previewImg" wx:key="index">
|
||||
<image src="{{item.fileUrl}}" mode=""/>
|
||||
<view class="del" catchtap="delImg" data-index="{{index}}">
|
||||
<image src="../../images/btn_del.png" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <van-uploader
|
||||
accept="image"
|
||||
file-list="{{ photoList }}"
|
||||
max-count="{{ maxLength }}"
|
||||
deletable="{{ true }}"
|
||||
bind:after-read="uploadImg" /> -->
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user