165 lines
4.0 KiB
TypeScript
165 lines
4.0 KiB
TypeScript
// 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链接列表
|
|
});
|
|
}
|
|
}
|
|
});
|