小程序上传图片

最新推荐文章于 2023-12-11 11:13:08 发布

小七你过来

最新推荐文章于 2023-12-11 11:13:08 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序上传图片

本文链接：https://blog.youkuaiyun.com/weixin_42704663/article/details/90485713

小程序专栏收录该内容

5 篇文章

订阅专栏

博客提及小程序上传图片相关内容，且使用了weui的CSS。在信息技术领域，这涉及前端开发中小程序的功能实现及样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="weui-cell">
        <view class="weui-cell__bd">
          <view class="weui-uploader"> 
            <view class="weui-uploader__hd"> 
            <view class="weui-uploader__title">上传图片</view> 
            </view> 
            <view class="weui-uploader__bd"> 
            <view class="weui-uploader__files"> 
              <block wx:for="{{photos}}" wx:for-item="image"> 
              <view class="weui-uploader__file"> 
                <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image> 
              </view> 
              </block> 
            </view> 
            <view class="weui-uploader__input-box"> 
              <view class="weui-uploader__input" bindtap="bindChooiceProduct"></view> 
            </view> 
            </view> 
          </view> 
        </view>
      </view>

//上传图片 
  bindChooiceProduct: function () {
    var that = this;

    wx.chooseImage({
      count: 3,  //最多可以选择的图片总数  
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        var tempFilePaths = res.tempFilePaths;
        //上传等待中...  
        wx.showToast({
          title: '正在上传...',
          icon: 'loading',
          mask: true,
          duration: 10000
        })
        console.log(res)
        var uploadImgCount = 0;
        for (var i = 0, h = tempFilePaths.length; i < h; i++) {
          console.log(tempFilePaths[i])
         
          wx.uploadFile({
            url: 'http://192.168.3.232:9980/card-api/teacher' + '/homework/image/upload',
            filePath: tempFilePaths[i],
            name: 'image',//和后台约定的名字 KEY
            header: {
              "Content-Type": "multipart/form-data"
            },
            success: function (res) {
              uploadImgCount++;

              var data = JSON.parse(res.data)  
              var photos = that.data.photos;
              photos.push(data.data.url + data.data.image );
              that.setData({
                photos: photos
              });
            console.log(data)

              //如果是最后一张,则隐藏等待中  
              if (uploadImgCount == tempFilePaths.length) {
                wx.hideToast();
              }  
            },
            fail: function (res) {
              wx.hideToast();
              wx.showModal({
                title: '错误提示',
                content: '上传图片失败',
                showCancel: false,
                success: function (res) { }
              })
            }
          });
        }
      }
    });
  } ,
  previewImage(e){
      var src = e.currentTarget.dataset.src; //获取data-src
      //图片预览
      wx.previewImage({
        current: src, // 当前显示图片的http链接
        urls: this.data.photos // 需要预览的图片http链接列表
      })
  },

css用的是 weui