miniapp/components/imgUpload.vue

<template>
	<view class="imgUpload">
		<uni-file-picker
		    v-model="fileList" 
			:limit='limit'
			:countLength='1'
			:auto-upload="false"
		    fileMediatype="image" 
			@select="select" 
			@delete="deleteFn"
		    mode="grid"
		/>
	</view>
</template>

<script>
	/*
	 * imgUpload 上传
	*/
    import { uploadImage } from '../api/upload.js'
	 import { getToken } from '@/utils/auth'
	// import store from '@/store/index.js'
	// let { state:{ login } } = store
	let intervalTime = null
	const app = getApp()
	export default {
		name:"imgUpload",
		data(){
			return {
				fileList:[]
			}
		},
		props:{
			value:{
				type:Array,
				default:() => []
			},
			disabled:{
				type:Boolean,
				default:() => false
			},
			limit:{
				type:Number,
				default:1
			}
		},
		watch:{
			value:{
				immediate:true,
				handler(val){
					if(val.length){
						this.initData()
					}
				}
			}
		},
		// created(){
		// 	// this.initData()
		// },
		methods:{
			// 初始化数据
			initData(){
				intervalTime = setInterval(() => {
					if(this.fileList.length != 0){
						clearInterval(intervalTime)
						return;
					}
					let arr = [...this.value]
					// TODO
					if(arr.length != 0){
						let imgTitem = arr.map(img => {
							return {
								"name":img,
								"extname":'image',
								"url":this.imgFilter(img),
								"currentUrl":img,
							}
						})
						this.fileList = [...this.fileList,...imgTitem]
					}
				},500)
			},
			// 过滤图片
			imgFilter(url){
				// console.log(url,"url")
				let str = url.split('/slm')[1]
				let currentUrl = app.globalData.requestUrl + str
				return currentUrl
			},
			// 文件上传
			select(e){
				// loading
				uni.showLoading({
					title: '上传中'
				});
				let { tempFilePaths } = e
				// console.log(tempFilePaths[0])
				uni.uploadFile({
					url:getApp().globalData.requestUrl + uploadImage,
					filePath: tempFilePaths[0],
					header:{
						Authorization:getToken() || '',
					},
					name: 'file',
					// TODO
					success:(res) => {
						let { data } = res
						uni.showToast({
							title:this.$t('requst.succes'),
							icon:'none',
							duration:1000
						})
						let imgpath = JSON.parse(data).data
						let obj = {
							"name":imgpath,
							"extname":'image',
							"url":this.imgFilter(imgpath),
							"currentUrl":imgpath,
						}
						
						this.fileList = [...this.fileList,obj]
						// let valueArr = [...this.value,imgpath]
						this.$emit('update:value',this.fileList);
						uni.hideLoading();
					},
					fail:(err) => {
						uni.showToast({
							title:this.$t('requst.fail'),
							icon:'none',
							duration:1000
						})
						this.fileList.pop()
						this.$emit('update:value',this.fileList)
						uni.hideLoading()
					}
				})
			},
			// 文件删除
			deleteFn(e){
				let { tempFilePath,tempFile:{ currentUrl } } = e
				let imgArr = [...this.value]
				this.fileList = this.fileList.filter(item => {
					return item.url != tempFilePath
				})
				imgArr = imgArr.filter(item => {
					return currentUrl.indexOf(item) == -1
				})
				this.$emit('update:value',imgArr)
			}
		}
	}
</script>

<style scoped lang="scss">
.dataCharts{
	width: 100%;
	height:100%;
}
</style>