vue之图片上传组件封装

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

使用方法

<template>
	<view class="bg-white">
		<upLoadImgSingle ref="uploadImg"></upLoadImgSingle>
		<button @tap="submit" class="cu-btn" :class="[['bg-blue', 'line-blue', 'line-blue lines-blue'][2],
		        ['sm', 'lg', ''][2], false ? 'round' : '', true ? 'shadow' : '', false ? 'block' : '']">
			<text v-show="false" class="fa fa-wechat padding-right-twenty" :disabled=false></text>
			提交
		</button>
	</view>
</template>

<script>
    export default {
        methods: {
            test () {
                this.ui.showImg('https://oimagea1.ydstatic.com/image?id=6101677891658508962&product=adpublish&w=520&h=347')
            },
            async submit () {
                const formData = new FormData()
                formData.append('pic', this.$refs.uploadImg.file)
				console.log(this.$refs.uploadImg.file)
                const token = localStorage.getItem('TOKEN_KEY')
                uni.uploadFile({
                    url: '/title/add-team-title',
                    filePath: this.file,
                    header: {Authorization: `${token}`},
                    name: 'pic',
                    formData: {
                        title: this.title,
                        desc: this.desc
                    },
                    success: (res) => {
                        console.log(res)
                        if (res.statusCode == 200) {
                            this.ui.showToast('上传成功')
                            this.title = ''
                            this.desc = ''
                            this.imgList = ''
                            this.file = ''
                        }
                    },
                    error: (err) => {
                        console.log(err)
                    }
                })
            },
        },
    }
</script>

组件代码

<template>
	<view class="bg-white">
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view v-show="imgList" class="bg-img" @tap="ViewImage"
					  :data-url="imgList">
					<image @tap="test" :src="imgList" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="status = true">
						<text class="fa fa-close"></text>
					</view>
				</view>
				<view class="solids text-center " @tap="ChooseImage" v-if="imgList.length<4">
					<view class="fa fa-camera text-grey" style="margin-top: 43.5%"></view>
				</view>
			</view>
		</view>
		<modal title="提示" content="确认要删除图片吗？" @click="handleClick"
				:show="status" :custom="false" @cancel="status = false">
			<view class="fa fa-close" style="position: absolute; top:20px;right: 20px" @tap="status = false"></view>
		</modal>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                imgList: '',
                file: '',
				status: false,
            }
        },
        methods: {
            test () {
                uni.previewImage({
					urls: [this.imgList],
                    current: this.imgList
                })
            },
            handleClick (e) {
				if (e.index == 0) {
				    this.status = false
				} else {
					this.file = ''
					this.imgList = ''
                    this.status = false
				}
            },
            ChooseImage(data) {
                uni.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'][1], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], // 从相册选择
                    success: (res) => {
                        this.file = res.tempFilePaths[0] // 要用formData上传的信息
						console.log(res.tempFilePaths)
						console.log(this.file)
                        this.imgList = res.tempFilePaths[0] // 要显示的图片资源
                    }
                })
            },
        },
    }
</script>