unicloud31-uni-file-picker上传组件的使用

使用第二种方式：uni-filer-picker组件上传文件

新建项目demo2，并关联云服务空间 还是关联之前创建的cloud-demo1云服务空间

在首页中配置

先到插件市场安装这个插件，插件的地址可以在

1. unicloud $\rightarrow$ 云存储 $\rightarrow$ 云存储 API $\rightarrow$ 概述里找到

2. uniapp $\rightarrow$ 组件 $\rightarrow$ 扩展组件uni-ui 里也可以找到

安装完成后，编辑器会在uni-modules目录中创建依赖

如果插件的版本需要更新，可以在uni-modules目录下，右键选择组件，然后会有更新选项

使用插件

复制官方示例的DOM部分到项目中测试

<template>
	<view class="home">
    <uni-file-picker 
    	v-model="imageValue" 
    	fileMediatype="image" 
    	mode="grid" 
    	@select="select" 
    	@progress="progress" 
    	@success="success" 
    	@fail="fail" 
    />
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 这是一个在组件中写好的双向绑定的变量
        imageValue:[]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

现在会在页面中展示出一个加号的组件，点击这个组件，会弹出选择文件的弹窗

选择要上传的文件后，就会显示在页面中，因为现在只有前端结构，没有写方法，所以会报错

现在虽然只有一个组件，什么方法都没有（组件那一堆@符号后面的都是方法，但是没有调用，所以报错了），但是云服务空间已经有这张图片了

文件名是云服务自定义的，是一个时间戳

复制官网的示例到页面中测试，就不会报错了

<template>
  <view class="home">
    <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select" @progress="progress"
      @success="success" @fail="fail" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 这是一个在组件中写好的双向绑定的变量
        imageValue: []
      }
    },
    onLoad() {

    },
    methods: {
      // 获取上传状态
      select(e) {
        console.log('选择文件：', e)
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      }
    }
  }
</script>

现在默认是多选的，如果加一个return-type，值设为object，就会变成单选 不用这个属性，也可以用limit属性，限制上传的文件数量在1-9之间

<template>
  <view class="home">
    <uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" returnType="object" @select="select" @progress="progress"
      @success="success" @fail="fail" />
  </view>
</template>

现在只能选择一张图片，选择文件时只能选一个，不能多选了，且添加文件的按钮不见了

取消预览

现在点击页面中的图片，可以进入预览模式

通过disable-preview属性设置为true可以关闭预览模式，仅在网格模式下生效，这些属性也能写成驼峰的形式disablePreview

auto-upload 自动上传，默认是开启的

title：组件标题

<template>
  <view class="home">
    <uni-file-picker
    	v-model="imageValue"
    	file-mediatype="image"
    	mode="grid"
    	limit="3"
      title="最多上传3个"
    	@progress="progress"
    	@success="success"
    	@fail="fail"
    	@select="select"
    />
  </view>
</template>

自定义样式

<template>
  <view class="home">
    <uni-file-picker
    	v-model="imageValue"
    	file-extname="jpg"
    	mode="grid"
    	limit="3"
      title="最多上传3个"
      :imageStyles="imgStyle" 
    	@progress="progress"
    	@success="success"
    	@fail="fail"
    	@select="select"
    />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 这是一个在组件中写好的双向绑定的变量
        imageValue: [],
        imgStyle:{
          "height": 60,	// 边框高度
          "width": 60,	// 边框宽度
          "border":{ // 如果为 Boolean 值，可以控制边框显示与否
            "color":"#eee",		// 边框颜色
            "width":"1px",		// 边框宽度
            "style":"solid", 	// 边框样式
            "radius":"50%" 		// 边框圆角，支持百分比
          }
        }
      }
    },
    onLoad() {

    },
    methods: {
      // 获取上传状态
      select(e) {
        console.log('选择文件：', e)
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      }
    }
  }
</script>

<style lang="scss" scoped;>
</style>

取消自动上传

:autoUpload="false"

给上传组件写一个ref属性，再写一个按钮，给按钮写点击事件，通过这个在点击事件中拿到包含这个属性的标签，再调用uniapp提供的upload方法，就能实现手动上传，而不是自动上传

<template>
  <view class="home">
    <uni-file-picker
    	v-model="imageValue"
    	mode="grid"
    	limit="3"
      :autoUpload="false"
    	@progress="progress"
    	@success="success"
    	@fail="fail"
    	@select="select"
      ref="files"
    />
    <button @click="clickUpload">上传文件</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 这是一个在组件中写好的双向绑定的变量
        imageValue: []
      }
    },
    onLoad() {

    },
    methods: {
      clickUpload(){
        // 通过ref属性获取页面中的upload方法
        // upload方法是uniapp提供的
        this.$refs.files.upload()
      },
      // 获取上传状态
      select(e) {
        console.log('选择文件：', e)
      },
      // 获取上传进度
      progress(e) {
        console.log('上传进度：', e)
      },

      // 上传成功
      success(e) {
        console.log('上传成功')
      },

      // 上传失败
      fail(e) {
        console.log('上传失败：', e)
      }
    }
  }
</script>