vue 自定义上传图片组件

新建个vue文件

<view class="fill-image-item flex flex-column flex-align" style="width:图片的宽度;height:图片的高度;" @click="updataImage">
		<image v-if="inputUrl" :src="inputUrl" style="width:214rpx !important;height:214rpx !important;"></image> //这里是在后端读取到之前上传的图片
		<image v-if="!inputUrl" :src="uploadUrl?uploadUrl:defaultUrl" style="width:图片的宽度;height:图片的高度;"></image> //这里是现在上传成功的图片
		<view class="flex flex-center speedOfProgress" style="width:图片的宽度;height:图片的高度;" v-if="uploadFlag">
			<image src="上传图片前显示的图片" class="delete-img" @click.stop="uploadAbort"></image>
			<text>{{uploadingNumber}}%</text>//这是上传时的成功率
		</view>
		<view class="flex flex-center speedOfProgress" v-if="uploadErrorFlage">
			<image src="这是上传失败的图片" class="delete-img" @click.stop="errorImage"></image>
			<image src="http://yiming.xitow.com/wxpic/jk-error.png" mode="" class="jk-error-img"></image>
		</view>
		<image src="上传图片成功后右上角删除按钮的图片" mode="" class="delete-img" v-if="uploadSucessFlage||inputUrl" @click.stop="deleteImage"></image>
	</view>
	<script>
	let sysUrl=require('@/api/env.js')
	export default{
		props:{
			inputUrl:{ //这是在父页面传过来的
				type:String,
				default:''
			}
		},
		data () {
			return {
				uploadTask:'',
				uploadUrl:'',
				uploadingNumber:0,
				uploadFlag:false,
				uploadSucessFlage:false,
				uploadErrorFlage:false,
				defaultUrl:'上传图片前显示的图片'
			}
		},
		onLoad () {
		},
		methods: {
			errorImage(){
				this.uploadErrorFlage=false
			},
			uploadAbort(){
				this.uploadFlag=false
				this.uploadTask.abort(); 
			},
			deleteImage(){
				console.log(1)
				this.uploadSucessFlage=false
				this.uploadUrl=''
				this.$emit("uploadImageUrl-delete",{deleteFlag:true})
			},
			// 预计会加裁剪
			updataImage(){
				if(this.uploadUrl==''){
					uni.chooseImage({
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							this.uploadFlag=true
							this.uploadErrorFlage=false
					        this.uploadTask = uni.uploadFile({
					            url: sysUrl.uploadImg, //仅为示例，非真实的接口地址
					            filePath: tempFilePaths[0],
					            name: 'file',
					            formData: {
					                'user': 'test'
					            },
					            success: (res) => {
									let resUrl=JSON.parse(res.data)
									this.uploadUrl=resUrl.data.name
									this.uploadFlag=false
									this.uploadSucessFlage=true
									this.$emit("uploadImageUrl-success",{imgUrl:resUrl.data.name})
					            },
								fail:(err)=>{
									this.uploadErrorFlage=true
								}
					        });
					        this.uploadTask.onProgressUpdate((res) => {
					            console.log('上传进度' + res.progress);
					            console.log('已经上传的数据长度' + res.totalBytesSent);
					            console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
								this.uploadingNumber=res.progress
					            // 测试条件，取消上传任务。
					            if (res.progress > 100) {
									this.uploadingNumber=100
					                this.uploadTask.abort(); 
					            }
					        });
					    }
					});
				}
				
			}
		}
	}
</script>

父页面代码

<upload-pictures
	class="m-top-15"
	:inputUrl="item.imgUrl"
	@uploadImageUrl-success="fillEmit($event,index)"
	@uploadImageUrl-delete="fillDelete($event,index)"
	v-for="(item,index) in updateImageList" :key="index"
	:class="{'m-left-right-20':(index==1 || index==4)?true:false}"
	>
</upload-pictures>