exam/exam-06173-uni - reg/components/yf-file-upload/yf-file-upload.vue

<template>
  
  <view>
  	<view>
  		<image v-if="fileUrl" :src="fileUrl" mode="widthFix" style="width: 120px;"></image>
  	</view>
  
  	<view v-if="fileUrl">
  		<button size="mini" type="warn" @click="clearUpload()">清除</button>
  	</view>
  
  	<view v-else>
  		<button size="mini" type="primary" @click="doUpload()">上传</button>
  	</view>
  </view>
  
  
</template>

<script>
import { uploadFile } from '@/common/upload.js'

export default {
  name: 'yf-file-upload',
  props: {
    value: String,
    accept: {
      type: String,
      default: '*'
    },
    tips: String,
    listType: {
      type: String,
      default: 'picture'
    }
  },
  data() {
    return {
      fileUrl: '',
	  showProgress: false,
	  percent: 0
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler() {
        this.fillValue()
      }
    },

    // 检测查询变化
    fileUrl: {
      handler(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    
  },

  created() {
    this.fillValue()
  },

  methods: {
	  


    fillValue() {
      this.fileUrl = this.value
    },
	
	// 执行上传操作
	doUpload() {
	
		let that = this
	
		uni.chooseImage({
			count: 1,
			sizeType: ['copressed'],
			success(res) {
				uploadFile(res.tempFiles[0]).then(resUrl=>{
					console.log('上传结果', resUrl)
					that.$emit('input', resUrl)
					that.showProgress = false
				})
			}
		})
	},
	
	// 清理上传
	clearUpload() {
		this.$emit('input', '')
	}

  }
}
</script>