uniapp 实战第一个组件，上传图片至后端服务器。

今天是第一次上手封装组件，搞完后觉得，挺有意思的。可能有很多需要改进的地方，但初体验，重在实现与走通，后面经验多了再优化。

1 功能概述。

当用户选择图片(单图)后，就将上传图片上传至后端。 （后端会进行存图，写库同步至微信静态资源服务器等 然后返回attachId 和 wx_key ，） 表单提交时，则将关联的attachId ,wx_key 一并提交。

2 代码实施

2.1 创建组件,wdm-upload.vue

<template>
	<view>
		<uni-file-picker  v-model="imageValue" limit="1" @select="select" @delete="deleteChoose"></uni-file-picker>
	</view>
</template>


<script>
	import config from '../../common/config.js'
	export default {
		name:"wdm-upload",
		data() {
			return {
				  imageValue: []
			};
		},
		props:['uploadName'],
		methods:{
		    async select(e) {
				console.log(this.uploadName)
				await this.uploadImg(e.tempFilePaths[0])
		    },
                    async uploadImg(filePath) {
                            let that = this;
                            console.log('uploadImg:' + filePath)
                            
                            //使用uni.uploadFile 进行上传
                            uni.uploadFile({
                                    url: config.apiBase + config.uploadAction,
                                    name:'file',
                                    filePath:filePath,
                                    header:{'X-Requested-With':'XMLHttpRequest'},
                                    success(res) {
                                            let res_json = JSON.parse(res.data).dt;
                                            //console.log(res_json);

                                            res_json.name = that.uploadName;
                                            that.$emit("uploadSucc", res_json)
                                    }
                            })				
                    },
                    //当执行删除时
                     async deleteChoose(e){
                            this.$emit("uploadDelete", this.uploadName)

                    }
		}
	}
</script>

上传后会emit 至 uploadSucc 方法 删除后，会 emit uploadDelete

2.2 你组件调用。

<wdm-upload uploadName='id_cover' v-model="formData.id_cover" 
				@uploadSucc='onUploadSucc'
				@uploadDelete='onUploadDelete'
				></wdm-upload>

2.3 写callback

子组件emit 至父后，进行相应的数据处理. 折腾下父级需要处理的业务.
后续当图片为身份证时还会哪对应的图片，去调后台接口，进行ocr，读关联的文字信息

	methods: {
		//上传成功后
		onUploadSucc(res){
			if('id_cover' == res.name) {
				this.formData.id_cover = '1'
				this.formData.id_cover_attachId = res.attachId;
				this.formData.id_cover_wx_key   = res.wx_key;
			}
			console.log(res);
		},
		//取消选中
		onUploadDelete(name){
			if('id_cover' == name) {
				this.formData.id_cover = ''
				this.formData.id_cover_attachId = '';
				this.formData.id_cover_wx_key   = '';
			}
		},