unicloud34-自定义上传-uploadfile云存储的上传方案

实现点击图片预览功能 uni.previewImage

要实现图片的预览，就给图片加点击事件，然后在点击事件中调用图片预览方法 ，可以滑动预览

<template>
  <view class="file">
    <view class="uploadGroup">
      <view class="box" v-for="(item,index) in temFiles" :key="index">
        <image :src="item" mode="aspectFill" @click="clickImg(index)"></image>
        <!-- 删除已选择图片 -->
        <view class="close" @click="onClose(index)">×</view>
      </view>
      <!-- 添加图片的图标在图片达到设置的最大数量后就不显示了 -->
      <view class="box add" @click="addFile" v-show="temFiles.length<maxSize">+</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        temFiles:[],
        maxSize:9
      };
    },
    methods:{
      // 点击预览图片
      clickImg(index){
        uni.previewImage({
          // 获取要预览的的图片索引
          // current是uni.previewImage对象官方给的属性
          current:index,
          urls:this.temFiles
        })
      },
      // 取消选中的图片
      onClose(e){
        // 根据索引删除选中的图片
        this.temFiles.splice(e,1)
      },
      // 选择本地图片
      addFile(){
        uni.chooseImage({
          // compressed 压缩图 original原图
          // sizeType:["compressed"]
          // 限制图片个数，这是每一次选择最多9张，不是一共只能选9张
          // count:9,
          success:res=>{
            // 选择图片时,如果选择了多次,后选择的图片会覆盖前面的图片
            // 所以要把不同次选中的图片路径拼接起来
            let oldTem=this.temFiles;
            let newTem=[...oldTem, ...res.tempFilePaths];
            // 控制图片数量张数,通过变量传递方便以后做功能控制具体的张数
            // count属性是控制每一次选择的图片张数.不能限制总共的图片数量
            newTem = newTem.slice(0,this.maxSize);
            // 把图片的临时地址保存到data
            this.temFiles = newTem
          }
        })
      }
    }
  }
</script>

上传功能 uni.uploadFile

插件中是选中图片后自动上传，也可以写一个按钮，点击提交后再上传

文档在 unicloud $\rightarrow$ 云存储 $\rightarrow$ 云存储API $\rightarrow$ 第三种上传方式

上传需要携带文件的后缀名，之前拿的tempFilePaths只有临时文件路径，不包含后缀名，所以需要改成获取tempFiles，这里面有后缀

let oldTem=this.temFiles;
let newTem=[...oldTem, ...res.tempFiles];

tempFiles是一个对象，包含很多信息，所以在DOM结构中，还要把之前的item改成item.path，否则拿不到具体的图片路径

<image :src="item.path" mode="aspectFill" @click="clickImg(index)"></image>

上传方法

      // 点击按钮上传图片
      goUpload(){
        uniCloud.uploadFile({
          filePath:this.temFiles[0].path,
          // 这里文件的后缀需要先获取到真实的文件后缀
          cloudPath:this.temFiles[0].name
        }).then(res=>{
          console.log(res);
        })
      },

预览方法也要改，否则预览不了

把item.path是temfiles里的一个属性，把他放到map里进行遍历，把当前选中的图片url遍历出来

      // 点击预览图片
      clickImg(index){
        uni.previewImage({
          // 获取要预览的的图片索引
          // current是uni.previewImage对象官方给的属性
          current:index,
          // 预览图路径需要过滤
          urls:this.temFiles.map(item=>item.path)
        })
      },

现在的代码

<template>
  <view class="file">
    <view class="uploadGroup">
      <view class="box" v-for="(item,index) in temFiles" :key="index">
        <image :src="item.path" mode="aspectFill" @click="clickImg(index)"></image>
        <!-- 删除已选择图片 -->
        <view class="close" @click="onClose(index)">×</view>
      </view>
      <!-- 添加图片的图标在图片达到设置的最大数量后就不显示了 -->
      <view class="box add" @click="addFile" v-show="temFiles.length<maxSize">+</view>
    </view>
    <!-- 点击按钮后才上传选中图片 -->
    <button @click="goUpload">确认上传</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        temFiles:[],
        maxSize:9
      };
    },
    methods:{
      // 点击按钮上传图片
      goUpload(){
        uniCloud.uploadFile({
          filePath:this.temFiles[0].path,
          // 这里文件的后缀需要先获取到真实的文件后缀
          cloudPath:this.temFiles[0].name
        }).then(res=>{
          console.log(res);
        })
      },
      // 点击预览图片
      clickImg(index){
        uni.previewImage({
          // 获取要预览的的图片索引
          // current是uni.previewImage对象官方给的属性
          current:index,
          // 预览图路径需要过滤
          urls:this.temFiles.map(item=>item.path)
        })
      },
      // 取消选中的图片
      onClose(e){
        // 根据索引删除选中的图片
        this.temFiles.splice(e,1)
      },
      // 选择本地图片
      addFile(){
        uni.chooseImage({
          // compressed 压缩图 original原图
          // sizeType:["compressed"]
          // 限制图片个数，这是每一次选择最多9张，不是一共只能选9张
          // count:9,
          success:res=>{
            // 选择图片时,如果选择了多次,后选择的图片会覆盖前面的图片
            // 所以要把不同次选中的图片路径拼接起来
            let oldTem=this.temFiles;
            let newTem=[...oldTem, ...res.tempFiles];
            // 控制图片数量张数,通过变量传递方便以后做功能控制具体的张数
            // count属性是控制每一次选择的图片张数.不能限制总共的图片数量
            newTem = newTem.slice(0,this.maxSize);
            // 把图片的临时地址保存到data
            this.temFiles = newTem
          }
        })
      }
    }
  }
</script>