custom-components/src/components/Form/Upload.vue

<template>
	<div class="form-com-upload">
		<el-upload
			:file-list="fileList"
			v-bind="configs"
			:action="imgUploadUrl"
			:show-file-list="configs.multiple||false"
			:on-success="afterUploadPic"
			:on-remove="removePic"
			:on-error="onError"
			:on-preview="handlePictureCardPreview"
			:before-upload="beforeUploadPic">
			<div class="avatar-uploader" v-if="!configs.multiple" :class="configs.round? 'avatar-uploader-round' : ''">
				<img v-if="imgList&&imgList.length" :src="setImgUrl(imgList[0])" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</div>
			<i v-else class="el-icon-plus"></i>
		</el-upload>

		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
import {imgCompress} from '../../utils/imgCompress.js'
import Tools from '../../utils/tool'
export default {
	name: 'FormComUpload',
	props: {
		'configs':{},
		value:{},
	},
	
	components:{
		
	},
	computed:{
		
	},
	watch:{
		value:{
			handler(n){
				if(this.isUploaded){
					return
				}
				
				if(!n){
					this.imgList = []
					this.fileList = []
					return
				}
				
				var list = []
				if(typeof n == 'string'){
					this.imgList = [n]
					list.push({
						name: '', 
						url: this.setImgUrl(n),
						response: {
							obj: {
								fullUri: n
							}
						}
					})
				} else {
					this.imgList = n
					this.imgList.forEach(v=>{
						list.push({
							name: '', 
							url: this.setImgUrl(v),
							response: {
								obj: {
									fullUri: v
								}
							}
						})
					})
				}
				this.fileList = list
			},
			immediate: true,
			deep: true
		}
	},
	data(){
		return {
			imgUploadUrl: Tools.upload_stream_url, // 图片服务器地址
			loading: "",
			imgList: [],
			dialogImageUrl: "",
			dialogVisible: false,
			fileList: [],
			isUploaded: false
		}
	},
	created(){
		
	},
	mounted() {
		
	},
	methods: {
		handlePictureCardPreview(file) {
			if(this.configs.multiple){
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		},
		beforeUploadPic(file) {
            if (file.size / 1024 / 1024 > 20) {
                this.$alert('上传图片不能超过20m', '提示')
                return false
            }
            this.loading = this.$loading({
                background: 'rgba(0, 0, 0, 0)',
                text: '上传中'
            })
            return imgCompress(file, this.loading)
		},
		afterUploadPic(response, file, fileList) {
            if (this.loading) {
                this.loading.close()
			}
			if(this.configs.multiple){
				this.imgList.push(response.obj.fullUri)
				this.$emit('input', this.imgList)
			} else {
				this.imgList = [response.obj.fullUri]
				this.$emit('input', this.imgList[0])
			}
			this.isUploaded = true
		},
		onError(){
			if (this.loading) {
                this.loading.close()
			}
			this.$message.error("上传失败")
		},
		removePic(file, fileList){
			var i = this.imgList.indexOf(file.response.obj.fullUri)
			this.imgList.splice(i, 1)
			console.log(this.imgList)
		},
		setImgUrl(url){
			return (Tools.formatImgUrl&&Tools.formatImgUrl(url)) || url
		}
	}
}
</script>

<style lang="scss">
.form-com-upload{
	line-height: 0;
	.avatar-uploader{
		width: 120px;
		height: 120px;
		display: -webkit-box;
		-webkit-box-align: center;
		-webkit-box-pack: center;
		overflow: hidden;
		border: 1px solid #ccc;
		img{
			width: 100%;
			height: 100%;
			display: block;
		}
		&.avatar-uploader-round{
			border-radius: 50%;
		}
	}
}
</style>