152 lines
5.1 KiB
JavaScript
152 lines
5.1 KiB
JavaScript
import { VantComponent } from '../common/component';
|
|
import { isImageFile } from './utils';
|
|
import { addUnit } from '../common/utils';
|
|
VantComponent({
|
|
props: {
|
|
disabled: Boolean,
|
|
multiple: Boolean,
|
|
uploadText: String,
|
|
useSlot: Boolean,
|
|
useBeforeRead: Boolean,
|
|
previewSize: {
|
|
type: null,
|
|
value: 90,
|
|
observer: 'setComputedPreviewSize'
|
|
},
|
|
name: {
|
|
type: [Number, String],
|
|
value: ''
|
|
},
|
|
accept: {
|
|
type: String,
|
|
value: 'image'
|
|
},
|
|
fileList: {
|
|
type: Array,
|
|
value: [],
|
|
observer: 'formatFileList'
|
|
},
|
|
maxSize: {
|
|
type: Number,
|
|
value: Number.MAX_VALUE
|
|
},
|
|
maxCount: {
|
|
type: Number,
|
|
value: 100
|
|
},
|
|
deletable: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
previewImage: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
previewFullImage: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
imageFit: {
|
|
type: String,
|
|
value: 'scaleToFill'
|
|
}
|
|
},
|
|
data: {
|
|
lists: [],
|
|
computedPreviewSize: '',
|
|
isInCount: true
|
|
},
|
|
methods: {
|
|
formatFileList() {
|
|
const { fileList = [], maxCount } = this.data;
|
|
const lists = fileList.map(item => (Object.assign(Object.assign({}, item), { isImage: typeof item.isImage === 'undefined' ? isImageFile(item) : item.isImage })));
|
|
this.setData({ lists, isInCount: lists.length < maxCount });
|
|
},
|
|
setComputedPreviewSize(val) {
|
|
this.setData({
|
|
computedPreviewSize: addUnit(val)
|
|
});
|
|
},
|
|
startUpload() {
|
|
if (this.data.disabled)
|
|
return;
|
|
const { name = '', capture = ['album', 'camera'], maxCount = 100, multiple = false, maxSize, accept, lists, useBeforeRead = false // 是否定义了 beforeRead
|
|
} = this.data;
|
|
let chooseFile = null;
|
|
const newMaxCount = maxCount - lists.length;
|
|
// 设置为只选择图片的时候使用 chooseImage 来实现
|
|
if (accept === 'image') {
|
|
chooseFile = new Promise((resolve, reject) => {
|
|
wx.chooseImage({
|
|
count: multiple ? (newMaxCount > 9 ? 9 : newMaxCount) : 1,
|
|
sourceType: capture,
|
|
success: resolve,
|
|
fail: reject
|
|
});
|
|
});
|
|
}
|
|
else {
|
|
chooseFile = new Promise((resolve, reject) => {
|
|
wx.chooseMessageFile({
|
|
count: multiple ? newMaxCount : 1,
|
|
type: 'file',
|
|
success: resolve,
|
|
fail: reject
|
|
});
|
|
});
|
|
}
|
|
chooseFile.then((res) => {
|
|
const file = multiple ? res.tempFiles : res.tempFiles[0];
|
|
// 检查文件大小
|
|
if (file instanceof Array) {
|
|
const sizeEnable = file.every(item => item.size <= maxSize);
|
|
if (!sizeEnable) {
|
|
this.$emit('oversize', { name });
|
|
return;
|
|
}
|
|
}
|
|
else if (file.size > maxSize) {
|
|
this.$emit('oversize', { name });
|
|
return;
|
|
}
|
|
// 触发上传之前的钩子函数
|
|
if (useBeforeRead) {
|
|
this.$emit('before-read', {
|
|
file,
|
|
name,
|
|
callback: (result) => {
|
|
if (result) {
|
|
// 开始上传
|
|
this.$emit('after-read', { file, name });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
this.$emit('after-read', { file, name });
|
|
}
|
|
});
|
|
},
|
|
deleteItem(event) {
|
|
const { index } = event.currentTarget.dataset;
|
|
this.$emit('delete', { index, name: this.data.name });
|
|
},
|
|
doPreviewImage(event) {
|
|
if (!this.data.previewFullImage)
|
|
return;
|
|
const curUrl = event.currentTarget.dataset.url;
|
|
const images = this.data.lists
|
|
.filter(item => item.isImage)
|
|
.map(item => item.url || item.path);
|
|
this.$emit('click-preview', { url: curUrl, name: this.data.name });
|
|
wx.previewImage({
|
|
urls: images,
|
|
current: curUrl,
|
|
fail() {
|
|
wx.showToast({ title: '预览图片失败', icon: 'none' });
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|