ztb-mini/components/uploader/index.js

const math = require('../../utils/math')
const util = require('../../utils/util')
const app = getApp()

Component({
	options: {
		addGlobalClass: true,
	},
	properties: {
		fileList: {
			type: Array,
			value: []
		},
		cropper: {
			type: Boolean,
			value: false
		},
		disabled: {
			type: Boolean,
			value: false
		},
		type: {
			type: String,
			value: 'image'
		},
		url: {
			type: String,
			value: ''
		},
		column: {
			type: Number,
			value: 3
		},
		duration: {
			type: Number,
			value: 60,
		},
		count: {
			type: Number,
			value: 9
		}
	},
	data: {
		loadingWidth: math.divide(690, 3),
		visible: false,
		srcList: [],
		taskList: []
	},
	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: {
		uploadFile: function (index, path) {
			var _this = 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 (!util.isEmpty(result.data)) {
						resp = JSON.parse(result.data)
					}
					if (resp && resp.code === 0) {
						_this.setData({
							['fileList[' + index + '].status']: 8,
							['fileList[' + index + '].url']: resp.data
						})
					} else {
						if (_this.data.type == 'image') {
							util.showToast('图片上传失败，请重新上传')
						} else  {
							util.showToast('视频上传失败，请重新上传')
						}
						_this.setData({
							['fileList[' + index + '].status']: -1
						})
					}
					_this.onChange()
				},
				fail: function (res) {
					_this.setData({
						['fileList[' + index + '].status']: -1
					})
					_this.onChange()
					if (_this.data.type == 'image') {
						util.showToast('图片上传失败，请重新上传')
					} else  {
						util.showToast('视频上传失败，请重新上传')
					}
				},
				complete: function (res) {
					for (let i = 0; i < _this.data.taskList.length; i++) {
						if (_this.data.taskList[i].path === path) {
							_this.data.taskList.splice(i, 1);
							break
						}
					}
				}
			})
			if (task) {
				// task.onProgressUpdate((res) => {
				// 	_this.setData({
				// 		['fileList[' + index + '].percent']: res.progress
				// 	})
				// })
			}
			_this.data.taskList.push({ path: path, task: task })
		},
		onStart: function (res) {
			if(res.tempFilePaths && res.tempFilePaths.length){
				if(this.data.cropper){
					this.setData({
						visible: true,
						srcList: res.tempFilePaths,
					})
				} else {
					var startIndex = this.data.fileList.length
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						this.setData({
							['fileList[' + (startIndex + i) + ']']: { status: 1, url: null, path: res.tempFilePaths[i], percent: 0 }
						})
						this.uploadFile(startIndex + i, res.tempFilePaths[i])
					}
				}
			} else if(!util.isEmpty(res.tempFilePath)){
				if(this.data.fileList.length >= this.data.count){
          return
				}
				if (Number(~~((10 * res.size) / 1024 / 1024) / 10) > 30) {
					util.showToast('上传视频不能大于30M!')
					return
				}
				var startIndex = this.data.fileList.length
				this.setData({
					['fileList[' + startIndex + ']']: { status: 1, url: null, path: res.tempFilePath, percent: 0, videoUrl: res.tempFilePath}
				})
				this.uploadFile(startIndex, res.tempFilePath)
			}
		},
		// 文件选择：图片或者视频
		chooseFile(e) {
			if (this.data.type == 'image') {
				wx.chooseImage({
					count: this.data.count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.onStart(res)
					}
				})
			} else if (this.data.type == 'video') {
				wx.chooseVideo({
					sourceType: ['album', 'camera'], //从相册选择
					maxDuration: this.data.duration,
					camera: 'back',
					success: (res) => {
						this.onStart(res)
					}
				})
			}
		},
		viewImage(e) {
			if (this.data.type !== 'image') {
				return
			}
			var index = e.currentTarget.dataset.index
			var imageList = []
			for (let i = 0; i < this.data.fileList.length; i++) {
				const element = this.data.fileList[i]
				if (element.path) {
					imageList.push(element.path)
				} else if (element.url) {
					imageList.push(element.url)
				}
			}
			wx.previewImage({ urls: imageList, current: imageList[index] })
		},
		deleteFile(e) {
			var index = e.currentTarget.dataset.index
			// 如果是正在上传的；
			if (this.data.fileList[index]) {
				if (this.data.fileList[index].status === 1) {
					if (this.data.taskList[index] && this.data.taskList[index].task) {
						this.data.taskList[index].task.abort() // 取消上传任务
					}
					this.data.taskList.splice(index, 1)
				}
				this.data.fileList.splice(index, 1)
			}
			this.setData({
				fileList: this.data.fileList
			})
			this.onChange()
		},
		onChange: function () {
			this.triggerEvent('customevent', this.data.fileList)
		},
		//裁剪图片回调
		cropCallback: function (event) {
			var startIndex = this.data.fileList.length
			for (let i = 0; i < event.detail.length; i++) {
				this.setData({
					visible: false,
					['fileList[' + (startIndex + i) + ']']: { status: 1, url: null, path: event.detail[i], percent: 0 }
				})
				this.uploadFile(startIndex + i, event.detail[i])
			}
		},
		//关闭回调
		closeCallback: function (event) {
			this.setData({ visible: false })
		}
	}
})