记录在uniapp中如何上传多个图片

// 上传商品轮播图
const shangc = () => {
  uni.chooseImage({
    count: 9, // 最多可以选择的图片张数
    success: (res) => {
      let arr = [];
      arr = res.tempFilePaths;
      fliesrc(arr);
    }
  });
};

const uploadFilePromise = (filePath) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: upFile.apiFile + '/upload/simple',
      filePath: filePath,
      name: 'file',
      formData: {},
      success: (uploadFileRes) => {
        const data = JSON.parse(uploadFileRes.data);
        resolve(data.retData); // 解析为上传成功的图片 URL
      },
      fail: (err) => {
        reject(err); // 拒绝 Promise 并传递错误
      }
    });
  });
};

const fliesrc = (imagePaths) => {
  uni.showLoading({
    title: '上传中',
    mask: true
  });
  const uploadPromises = imagePaths.map((filePath) => uploadFilePromise(filePath));
  Promise.all(uploadPromises)
    .then((imageUrls) => {
      console.log(4566, imageUrls);
      // imageUrls 是一个包含所有上传图片 URL 的数组
      // 假设您想要将所有这些 URL 保存在 details.value.imageUrls 中
      details.value.imageUrls = imageUrls;
      console.log('商品详情', details.value.imageUrls);
      uni.hideLoading(); //关闭加载框
      uni.$u.toast('上传图片成功');
    })
    .catch((error) => {
      // 如果有任何上传失败,这里会捕获到错误
      uni.$u.toast('上传失败:' + error.message);
      console.error('上传失败:', error);
    });
};

uni-app中,如果你想实现在滑动过程中动态调整图片大小,你可以利用`Vue.js`的响应式特性结合`@touchmove`事件监听器。首先,你需要确保图片是以`<image>`组件的形式加载,并且设置了初始的宽高值。然后,可以编写如下的自定义滑动函数: ```html <template> <view class="slider"> <image :src="currentImageSrc" :style="{ width: currentWidth + 'px', height: currentHeight + 'px' }"></image> <!-- 添加两个swipe-item标签,模拟左右滑动 --> <swiper @change="onSwiperChange"> <swiper-item v-for="(item, index) in images" :key="index" @touchstart="touchStart(index)"> <image :src="item.src" style="width: 100%; height: 100%"></image> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { currentImageIndex: 0, currentImageSrc: this.images[0].src, currentWidth: 'auto', // 初始宽度为自动适应 currentHeight: 'auto', images: [ { src: 'path/to/image1.jpg' }, { src: 'path/to/image2.jpg' }, ... // 更多图片 ], }; }, methods: { touchStart(index) { this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; }, onSwiperChange(newIndex) { if (newIndex !== this.currentImageIndex) { this.currentImageIndex = newIndex; this.currentImageSrc = this.images[newIndex].src; this.updateSize(); } }, updateSize() { const moveDistance = Math.abs(this.startX - event.changedTouches[0].clientX); const maxMove = this.$el.clientWidth; // 滑块的最大滑动距离 let scale = moveDistance / maxMove; // 规定缩放比例范围 // 调整图片大小,这里假设图片宽度不变,高度随滑动缩放 this.currentWidth = '100%'; this.currentHeight = `${(1 - scale) * 100}%`; // 缩小的比例乘以原始高度 }, }, }; </script> ``` 在这个例子中,当用户开始滑动时,会触发`touchStart`方法记录起始位置。当滑动结束时,`onSwiperChange`会被调用,更新当前显示的图片以及调用`updateSize`来计算新的图片大小。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值