uniapp+uview1实现本地图片上传

在实际项目中，经常会有上传图片的需求，那么本文主要介绍如何利用uview1中的Upload组件实现上传，具体代码如下：

1.html代码

<view class="pic">
  <view class="pic_top">
    <view class="left">
      <text>图片</text>
      <text class="require">*</text>
    </view>
    <view class="right"> 单张图片大小不超过20MB, 最多可上传9张 </view>
  </view>
  <view class="pic_bottom">
    <u-upload
      ref="uUpload"
      :action="action"
      :auto-upload="true"
      upload-text=" "
      :show-progress="false"
      multiple
      max-count="9"
      :header="header"
      del-bg-color="#fff"
      del-color="#4f79f5"
      :max-size="20 * 1024 * 1024"
      @on-remove="removePic($event, item)"
      @on-success="successUpload($event)"
    ></u-upload>
  </view>
</view>

注意：在使用<u-upload>之前，一定要先按照uview1版本的包。

2.css代码

.pic {
  .pic_top {
    margin: 10rpx 0;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      .require {
        color: #e64545;
      }
    }
    .right {
      color: #c4c4c4;
      font-size: 24rpx;
    }
  }
  .pic_bottom {
    padding-bottom: 20rpx;
  }
}

3.js代码

data() {
  return {
    // 上传地址（把你要上传到的服务器地址写在此处即可，以下地址为例子，不可用）
    action: "https://test.pic.com/snmsbusiness/sysFileInfo/upload",
    // 请求头（根据请求传参的需求来，如果需要就把对应token加上）
    header: {
      Authorization: "Bearer " + uni.getStorageSync("user_token"),
    },
    // 存储图片地址的数组
    fileImgList: [],
  }
},
methods: {
  // 上传图片成功的方法
  successUpload(data) {
    // 获取上传图片的地址，并将地址保存至数组中
    this.fileImgList.push(data.data.filePath);
    console.log(this.fileImgList);
  },
  // 移除图片的方法
  removePic(index, item) {
    console.log("index: ", index);
    this.fileImgList.splice(index, 1);
  },
},

注意：是否需要请求头要根据实际情况决定，另外，此处我是在缓存中获取token，拼接成所需的请求头的。

只要以上代码，就可实现本地图片上传。我在<u-upload>中添加了属性:auto-upload="true"，则实现的是自动上传，如果你想手动上传，则将true改成false，再通过ref调用组件的upload方法，就可实现手动上传图片（即调用this.$refs.uUpload.upload()这个方法 )。

关于上传组件更精细的信息，可以查阅文档：Upload 上传 | uView - 多平台快速开发的UI框架 - uni-app UI框架

uniapp+uview1实现本地图片上传

猜你喜欢