uniapp 开发uploader文件上传组件

最近本人在开发时uniapp小程序需要使用uploader组件，但是老是遇到一些奇怪的坑，于是就写了个原生分享一下

uploader组件是我们经常用到的来看下如何使用吧：

一、准备一张带上传符号的图片

二、给图片所有写点样式

<view class="uploader-warpper">
   <image
     src="../../static/image/uploadImage.png"  //这里是图片地址
   ></image>
</view>
    
 .uploader-warpper {
    image {
      width: 180rpx;
      height: 180rpx;
    }
  }
复制代码

三、使用uni.chooseImage和uni.uploadFile实现图片的上传功能

uni.chooseImage可以从本地或相机中选择图片上传

文档：uniapp.dcloud.io/api/media/i…

uni.uploadFile用于文件上传

文档：uniapp.dcloud.io/api/request…

四、使用uni.previewImage做文件预览

uni.previewImage用于图片预览 

文档：uniapp.dcloud.io/api/media/i…

全部代码

<view class="uploader-warpper">
    <block v-for="(val, ind) in showPic"> //val是文件对象，内有url和index两个值
      <image
         :key="val.url"
         :src="val.url"
          v-show="index === val.index"  //index是外部data的v-for带的
          @tap="handleImagePre(val)"
      ></image>
    </block>
   <image
     src="../../static/image/uploadImage.png"  //这里是图片地址
     @tap="handleUpLoadTap(index)"  //index来自v-for中作为标识记录哪个图片被点击你也可用id啥的
   ></image>
</view>
    
handleUpLoadTap(index){
    this.remark = index //记录标识
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera", "album"], //从相册选择
        success: (res) => {
          this.upload(res.tempFilePaths[0]); //此处获得一个临时url
        },
     });
}
upload(url){
    uni.uploadFile({ 
    url: 'https://www.example.com/upload', //改成你要传的地址，这里只是示例地址
    filePath: url, 
    name: 'file', //文件对应的key
    formData: { 'user': 'test' }, //HTTP 请求中其他额外的 form data |
    success: (uploadFileRes) => { 
        //这部分看你和后端的约定主要是拿到图片返回的URL并将文件对象push进一个数组里
        let parseData = JSON.parse(res.data); //转换后端数据
          if (parseData.success) {
            let url = configService.apiUrl + parseData.data;
            this.data.forEach((item, index) => { //data用来循环渲染
              if (index == this.remark) { //通过标识找到点击的那行数据
              //showPic是个数组用来保存文件对象,index是文件的标识用来记录图片属于哪一行
                this.showPic.push({ url, index }); 
              //showAddButton控制上传符号图片是否展示
                item.showAddButton = false;
              }
            });
          }
    } 
    });
    fail： res => uni.showToast({title:res.msg, icon: 'none'}) //上传失败展示原因
}
handleImagePre(val) {
      uni.previewImage({
        current: 1, //  传 Number H5端出现不兼容
        urls: [val.url],
      });
},
    
    
    
 .uploader-warpper {
    image {
      width: 180rpx;
      height: 180rpx;
    }
  }
复制代码

除了基础的文件选择上传预览图片之外，还有删除，loading等功能也是比较好实现的，这里就不一一讲解了~