微信小程序之上傳圖片(含前后端代碼例子)

此代碼示例，能夠讓你成功將圖片上傳至后端，后端做相應的處理，然后返回成功碼。

前端小程序代碼

index.wxml:

<view class='content'>
  <view class='img-box'>
    <view class='img-list'>
      <block wx:for="{{detailPics}}" wx:key="index">
        <view class='img-item'>
          <image src='{{item}}' bindlongpress="bindlongpressimg" data-id='{{index}}'></image>
        </view>
      </block>
      <view class='chooseimg' bindtap='uploadDetailImage'>
        <view class="weui-uploader__input-box"></view>
      </view>
    </view>
    <view class='tips'>長按對應的圖片即可刪除</view>
  </view>
</view>

index.wxss:

.content {
  width: 100%;
  background-color: #fff;
}

.img-list {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.img-item {
  width: 30%;
  text-align: left;
  margin-right: 20rpx;
  margin-bottom: 10rpx;
}

.img-item image {
  width: 180rpx;
  height: 180rpx;
}

.submit-btn {
  width: 100%;
  background-color: #fff;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  position: fixed;
  bottom: 100rpx;
}

.chooseimg {
  background-color: #fff;
}

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 180rpx;
  height: 180rpx;
  border: 1px solid #d9d9d9;
}

.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}

.weui-uploader__input-box:after, .weui-uploader__input-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}

.weui-uploader__input-box:after, .weui-uploader__input-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.tips {
  color: #666;
  font-size: 24rpx;
  padding-bottom: 20rpx;
}

.img-box {
  width: 92%;
  margin: auto;
  padding-top: 20rpx;
}

index.js:

// component/uploadImages/index.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    count: { //最多選擇圖片的張數，默認9張
      type: Number,
      value: 9
    },
    uploadUrl: { //圖片上傳的服務器路徑
      type: String,
      value: ''
    },
    showUrl: { //圖片的拼接路徑
      type: String,
      value: ''
    }
  },

  /**
   * 組件的初始數據
   */
  data: {
    detailPics: [], //上傳的結果圖片集合
  },

  ready: function () {
    console.log(this.data)
  },

  /**
   * 組件的方法列表
   */
  methods: {

    uploadDetailImage: function (e) { //這里是選取圖片的方法
      var that = this;
      var pics = [];
      var detailPics = that.data.detailPics;
      if (detailPics.length >= that.data.count) {
        wx.showToast({
          title: '最多選擇' + that.data.count + '張！',
        })
        return;
      }
      wx.chooseImage({
        count: that.data.count, // 最多可以選擇的圖片張數，默認9
        sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有
        success: function (res) {
          var imgs = res.tempFilePaths;
          for (var i = 0; i < imgs.length; i++) {
            pics.push(imgs[i])
          }
          that.uploadimg({
            url: "http://www.test.com//test-api/wechat/applet/api/uploadUserAvatar", //這里是你圖片上傳的接口
            path: pics, //這里是選取的圖片的地址數組
          });
        },
      })

    },
    //多張圖片上傳
    uploadimg: function (data) {
      wx.showLoading({
        title: '上傳中...',
        mask: true,
      })
      var that = this,
        i = data.i ? data.i : 0,
        success = data.success ? data.success : 0,
        fail = data.fail ? data.fail : 0;
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        name: 'file',
        formData: {"userId":"35"},
        success: (resp) => {
          wx.hideLoading();
          success++;
          var str = resp.data //返回的結果，可能不同項目結果不一樣

          console.log(str);
          // var pic = JSON.parse(str);
          // var pic_name = that.data.showUrl + pic.Data;
          // var detailPics = that.data.detailPics;
          // detailPics.push(pic_name)
          // that.setData({
          //   detailPics: detailPics
          // })
        },
        fail: (res) => {
          fail++;
          console.log('fail:' + i + "fail:" + fail);
        },
        complete: () => {
          i++;
          if (i == data.path.length) { //當圖片傳完時，停止調用     
            console.log('執行完畢');
            console.log('成功：' + success + " 失敗：" + fail);
            var myEventDetail = {
              picsList: that.data.detailPics
            } // detail對象，提供給事件監聽函數
            var myEventOption = {} // 觸發事件的選項
            that.triggerEvent('myevent', myEventDetail, myEventOption)//結果返回調用的頁面
          } else { //若圖片還沒有傳完，則繼續調用函數
            data.i = i;
            data.success = success;
            data.fail = fail;
            that.uploadimg(data);//遞歸，回調自己
          }
        }
      });
    },

  }
})

后端Java代碼(這里我使用的是第三方存儲，如騰訊雲，如果讀者朋友們是使用第三方存儲替換是一件很容易的事情)

核心代碼如下:

@PostMapping("/uploadUserAvatar")
@ApiOperation(value = "上傳用戶頭像", notes = "上傳用戶頭像")
public JSONObject uploadUserAvatar(HttpServletRequest request) {

    JSONObject json = new JSONObject();
    try {

        String userId = request.getParameter("userId");

        COSClientUtil cosClientUtil = new COSClientUtil();

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 獲取上傳的文件
        MultipartFile multiFile = multipartRequest.getFile("file");

        
        
        String name = cosClientUtil.uploadFileCos(multiFile);

        // 獲取文件路徑
        String fileUrl = cosClientUtil.getFileUrl(name);
        
        Console.log("fileUrl:"+fileUrl);
        
        
        // 對文件路徑進行處理
        String dbFileUrl = fileUrl.substring(0, fileUrl.indexOf("?"));
        
        
        Console.log("dbFileUrl:"+dbFileUrl);

        User user = new User();
        user.setId(Integer.parseInt(userId));
        user.setSmallAvatar(dbFileUrl);

        boolean isUploadUserAvatar = userService.updateById(user);

        if (isUploadUserAvatar) {
            json.put(ResponseUtils.CODE, ResponseUtils.SUCCESS_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.SUCCEESS_MSG);
        } else {
            json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
            json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);
        }

    } catch (Exception e) {
        e.printStackTrace();

        json.put(ResponseUtils.CODE, ResponseUtils.ERROR_CODE);
        json.put(ResponseUtils.MSG, ResponseUtils.ERROR_MSG);

    }

    return json;
}