uni-app小程序上传图片

              <view v-for="(item,index) in imgList"
                    class="pr mr36"
                    style="display:inline-block"
                    :key="index">
                <image style="width:120rpx;height:120rpx"
                       @click="onPreviewImage(index)"
                       :src="item"></image>


                <view class="pa"
                      @click="delImage(index)"
                      style="top:-12rpx;left:110rpx">
                  <u-icon name="close-circle-fill"
                          color="red"
                          size="20"></u-icon>
                </view>
              </view>
              <image style="width:120rpx;height:120rpx;display:inline-block"
                     @click="uploadFn"
                     class="mr20"
                     src="/subPackage/index-package/static/shangchuang.png"></image>
   //预览图片
    onPreviewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.imgList
      })
    },
    // 删除图片
    delImage(index) {
      this.imgList.splice(index, 1)
    },
    
   //上传图片
    uploadFn() {
      uni.chooseImage({
        count: 1, // 图片数量-----默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.showLoading({
            title: '开始上传',
            icon: 'none',
          });
          uni.uploadFile({
            url: baseUrl + '/system/oss/weChat/upload', //仅为示例,非真实的接口地址
            name: 'file',
            header: {
              'content-type': 'Application/json'
            },
            filePath: tempFilePaths[0],
            success: (uploadFileRes) => {
              this.toastFn('上传成功')
              uni.hideLoading();
              let imgList = this.imgList;
              imgList.push(JSON.parse(uploadFileRes.data).data.url)
              this.imgList = imgList;
            }
          });
        }
      });
    },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值