uniapp实现图片上传功能

效果图：

 html:

<view class="upload_info">
  <view class="upload_item" v-for="(item, index) of gallery" :key="index">
    <image :src="item" mode="aspectFill"></image>
    <text class="delete" @click="onDeleteImg(index)"></text>
  </view>
  <view
    class="upload_item upload_img"
    @click="onImgsUpload"
    v-if="gallery.length < 8"
  >
    +
  </view>
</view>

css:

.upload_info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 18rpx;
  margin-bottom: 18rpx;
  .upload_item {
    margin-top: 16rpx;
    margin-right: 16rpx;
    position: relative;
    width: 190rpx;
    height: 190rpx;
    display: flex;
    justify-content: center;
    background: #fff;
    font-size: 100rpx;
    line-height: 170rpx;
    color: #cccccc;
    image {
      width: 100%;
      height: 100%;
    }
    .delete {
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(25%, -25%);
      width: 36rpx;
      height: 36rpx;
      background: url(@/static/icon/ic_delete.png) center/cover no-repeat;
    }
    &.upload_img {
      border: 2rpx dashed #e5e5e5;
    }
  }
}

js:

//上传图片
    onImgsUpload() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          res.tempFilePaths.forEach((item) => {
            uni.uploadFile({
              url: this.uploadUrl,
              header: {
                Authorization: "Bearer " + this.userInfo.token,
              },
              filePath: item,
              name: "file",
              success: function (uploadFileRes) {
                this.picUrls = [];
                this.picUrls.push(JSON.parse(uploadFileRes.data).data.url);
                this.gallery = this.gallery.concat(this.picUrls);
              },
            });
          });
        },
      });
    },
// 删除图片
    onDeleteImg(index) {
      this.gallery.splice(index, 1);
      this.picUrls.splice(index, 1);
    },

结语：功能比较简单，方便以后粘贴使用，欢迎大家补充交流。