You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
238 lines
7.8 KiB
238 lines
7.8 KiB
import { VantComponent } from '../common/component'
|
|
import { isImageFile, isVideo, chooseFile, isPromise } from './utils'
|
|
import { chooseImageProps, chooseVideoProps } from './shared'
|
|
const app = getApp()
|
|
|
|
VantComponent({
|
|
props: Object.assign(Object.assign({
|
|
disabled: Boolean,
|
|
multiple: Boolean,
|
|
crop: Boolean,
|
|
uploadText: String,
|
|
useBeforeRead: Boolean,
|
|
afterRead: null,
|
|
beforeRead: null,
|
|
previewSize: { type: null, value: 90 },
|
|
name: { type: [Number, String], value: '' },
|
|
accept: { type: String, value: 'image' },
|
|
fileList: { type: Array, value: [], observer: 'formatFileList' },
|
|
maxSize: { type: Number, value: Number.MAX_VALUE },
|
|
url: { type: String, value: 'uploadImage' },
|
|
maxCount: { type: Number, value: 100 },
|
|
deletable: { type: Boolean, value: true },
|
|
showUpload: { type: Boolean, value: true },
|
|
previewImage: { type: Boolean, value: true },
|
|
previewFullImage: { type: Boolean, value: true },
|
|
imageFit: { type: String, value: 'aspectFill' },
|
|
uploadIcon: { type: String, value: 'photograph' }
|
|
}, chooseImageProps), chooseVideoProps),
|
|
data: {
|
|
lists: [],
|
|
isInCount: true,
|
|
cropList: [],
|
|
taskList: [],
|
|
visible: false
|
|
},
|
|
lifetimes: {
|
|
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
|
|
detached: function () {
|
|
for (let i = 0; i < this.data.taskList.length; i++) {
|
|
if (this.data.taskList[index]) {
|
|
this.data.taskList[index].abort() // 取消上传任务
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
isEmpty: function(val) {
|
|
return typeof val === 'undefined' || val === '' || val === null
|
|
},
|
|
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 })
|
|
},
|
|
getDetail(index) {
|
|
return { name: this.data.name, index: index == null ? this.data.fileList.length : index }
|
|
},
|
|
startUpload() {
|
|
if (disabled)
|
|
return
|
|
const { maxCount, multiple, accept, lists, disabled } = this.data
|
|
chooseFile(Object.assign(Object.assign({}, this.data), { maxCount: maxCount - lists.length })).then(res => {
|
|
let file = null
|
|
if (isVideo(res, accept)) {
|
|
file = Object.assign({ path: res.tempFilePath }, res)
|
|
} else {
|
|
file = multiple ? res.tempFiles : res.tempFiles[0]
|
|
}
|
|
this.onBeforeRead(file)
|
|
}).catch(error => {
|
|
this.$emit('error', error)
|
|
})
|
|
},
|
|
onBeforeRead(file) {
|
|
const { beforeRead, useBeforeRead } = this.data
|
|
let res = true
|
|
if (typeof beforeRead === 'function') {
|
|
res = beforeRead(file, this.getDetail())
|
|
}
|
|
if (useBeforeRead) {
|
|
res = new Promise((resolve, reject) => {
|
|
this.$emit('before-read', Object.assign(Object.assign({ file}, this.getDetail()), { callback: (ok) => { ok ? resolve() : reject() }}))
|
|
})
|
|
}
|
|
if (!res) {
|
|
return
|
|
}
|
|
if (isPromise(res)) {
|
|
res.then((data) => this.onAfterRead(data || file))
|
|
} else {
|
|
this.onAfterRead(file)
|
|
}
|
|
},
|
|
onAfterRead(file) {
|
|
const { maxSize } = this.data;
|
|
const oversize = Array.isArray(file) ? file.some(item => item.size > maxSize) : file.size > maxSize
|
|
if (oversize) {
|
|
this.$emit('oversize', Object.assign({ file }, this.getDetail()))
|
|
return
|
|
}
|
|
if (typeof this.data.afterRead === 'function') {
|
|
this.data.afterRead(file, this.getDetail())
|
|
}
|
|
if(this.data.crop){
|
|
var cropList = []
|
|
for (let index = 0; index < file.length; index++) {
|
|
cropList.push(file[index].path)
|
|
}
|
|
this.setData({ visible: true, cropList:cropList })
|
|
} else {
|
|
this.handFiles(file)
|
|
}
|
|
},
|
|
deleteItem(event) {
|
|
var index = event.currentTarget.dataset.index
|
|
var fsList = this.data.fileList
|
|
// 如果是正在上传的；
|
|
if (fsList[index]) {
|
|
if (fsList[index].status === 'uploading') {
|
|
if (this.data.taskList[index] && this.data.taskList[index].task) {
|
|
this.data.taskList[index].task.abort() // 取消上传任务
|
|
}
|
|
this.data.taskList.splice(index, 1)
|
|
}
|
|
fsList.splice(index, 1)
|
|
}
|
|
this.formatFileList()
|
|
this.onUploadChange()
|
|
},
|
|
onPreviewImage(event) {
|
|
const { index } = event.currentTarget.dataset;
|
|
const { lists } = this.data;
|
|
const item = lists[index];
|
|
this.$emit('click-preview', Object.assign({ url: item.url || item.path }, this.getDetail(index)));
|
|
if (!this.data.previewFullImage)
|
|
return;
|
|
wx.previewImage({
|
|
urls: lists.filter(item => item.isImage).map(item => item.url || item.path),
|
|
current: item.url || item.path,
|
|
fail() {
|
|
wx.showToast({title: '预览图片失败',icon: 'none'})
|
|
}
|
|
})
|
|
},
|
|
/*********************************************************************************************************************************************/
|
|
onUploadChange: function(){
|
|
var fileList = this.data.fileList
|
|
var uploading = false
|
|
for (let index = 0; index < fileList.length; index++) {
|
|
const element = fileList[index]
|
|
if(element.status == 'uploading'){
|
|
uploading = true
|
|
break
|
|
}
|
|
}
|
|
if(!uploading){
|
|
this.$emit('file-change', Object.assign({ fileList }, this.getDetail()))
|
|
}
|
|
},
|
|
updateFile: function(path, url, status, message){
|
|
var fsList = this.data.fileList
|
|
var index = -1
|
|
for (let i = 0; i < fsList.length; i++) {
|
|
const element = fsList[i]
|
|
if(element.status == 'uploading' && element.path == path){
|
|
index = i
|
|
break
|
|
}
|
|
}
|
|
if(index >= 0){
|
|
this.setData({ ['fileList[' + index + ']']: { path, url, status, message } })
|
|
}
|
|
},
|
|
uploadFile: function (path) {
|
|
var that = this
|
|
const task = wx.uploadFile({
|
|
url: app.httpUrl + '/saas-user/utils/uploadImage',
|
|
filePath: path,
|
|
name: 'image',
|
|
header: { 'Content-Type': 'multipart/form-data', 'appversion': app.version },
|
|
success: function (result) {
|
|
var resp = null
|
|
if (!that.isEmpty(result.data)) {
|
|
resp = JSON.parse(result.data)
|
|
}
|
|
if (resp && resp.code === 0) {
|
|
that.updateFile(path, resp.data, 'done', '')
|
|
} else {
|
|
that.updateFile(path, null, 'failed', '上传失败')
|
|
}
|
|
that.onUploadChange()
|
|
},
|
|
fail: function (res) {
|
|
that.updateFile(path, null, 'failed', '上传失败')
|
|
that.onUploadChange()
|
|
},
|
|
complete: function (res) {
|
|
for (let i = 0; i < that.data.taskList.length; i++) {
|
|
if (that.data.taskList[i].path === path) {
|
|
that.data.taskList.splice(i, 1);
|
|
break
|
|
}
|
|
}
|
|
}
|
|
})
|
|
that.data.taskList.push({ path: path, task: task })
|
|
},
|
|
handFiles: function(fsList){
|
|
if(!this.isEmpty(this.data.url)){
|
|
// 进行文件上传。
|
|
for (let i = 0; i < fsList.length; i++) {
|
|
const element = fsList[i]
|
|
element.status = 'uploading'
|
|
element.message = '上传中'
|
|
this.uploadFile(element.path)
|
|
}
|
|
const fileList = this.data.fileList
|
|
this.setData({ visible: false, fileList: fileList.concat(fsList) })
|
|
} else {
|
|
this.$emit('after-read', Object.assign({ fsList }, this.getDetail()))
|
|
}
|
|
},
|
|
//裁剪图片回调
|
|
onCroped: function (event) {
|
|
var fsList = []
|
|
for (let index = 0; index < event.detail.length; index++) {
|
|
fsList.push({ path: event.detail[index] })
|
|
}
|
|
this.handFiles(fsList)
|
|
},
|
|
//关闭回调
|
|
onClose: function () {
|
|
this.setData({ visible: false })
|
|
}
|
|
}
|
|
})
|