assessment-front/pages_order/components/formUpload.vue

<template>
  <view>
    <uv-upload 
      :fileList="displayFileList"
      :accept="accept"
      :maxCount="maxCount" 
      :width="width"
      :height="height"
      @afterRead="afterRead" 
      @delete="deleteFile"
    >
      <button class="flex btn">
		    <image class="icon" src="@/pages_order/static/feedback/icon-camera.png" mode="widthFix"></image>
      </button>
    </uv-upload>
  </view>
</template>


<script>
	export default {
    props: {
			value: {
        type: Array,
				default() {
          return []
        }
			},
      accept: {
        type: String,
        default: 'image' // all | media | image | file | video
      },
      width: {
        type: Number | String,
        default: 133,
      },
      height: {
        type: Number | String,
        default: 133,
      },
      maxCount: {
        type: Number | String,
        default: 100,
      }
    },
		data() {
      return {
      }
    },
    computed: {
      fileList: {
        set(val) {
          this.$emit('input', val)
        },
        get() {
          return this.value
        }
      },
      displayFileList() {
        return this.fileList.map(url => ({ url }))
      },
    },
    watch: {
      fileList: {
        handler(val) {
          console.log('watch fileList', val)
        },
        deep: true,
      },
      displayFileList: {
        handler(val) {
          console.log('watch displayFileList', val)
        },
        deep: true,
      },
    },
    methods: {
			deleteFile(e){
        console.log('deleteFile', e)
        const fileList = [...this.fileList]
        fileList.splice(e.index, 1)
				this.fileList = fileList
			},
			afterRead(e){
        this.$Oss.ossUpload(e.file.url).then(url => {
          this.fileList = this.fileList.concat(url)
        })
			},
    },
  }
</script>

<style scoped lang="scss">
  .btn {
    border-radius: 0;
    
    .icon {
      width: 133rpx;
      height: auto;
    }
  }
</style>