uniapp 开发uploader文件上传组件

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

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

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

uploadImage.png

二、给图片所有写点样式

<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可以从本地或相机中选择图片上传

image.png

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

uni.uploadFile用于文件上传

image.png

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

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

uni.previewImage用于图片预览 

image.png

文档: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等功能也是比较好实现的,这里就不一一讲解了~

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值