vue之图片上传组件封装

<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>