【uniapp小程序】上传图片

uni.chooseImage({
  count: 6, //默认9
  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album'], //从相册选择
  success: function (res) {
    console.log(JSON.stringify(res.tempFilePaths));
  }
});

<template>
  <view>
    <view class="add-cover" @click="upload">
      <!-- 这里使用 :src="cover"  将src动态赋值-->
      <image class="cover" :src="cover" mode="aspectFill"></image>
      <view class="default">
        <image src="../../../static/add.png" class="add-icon"></image>
        <!-- 没有上传图片时状态是添加，上传版完毕是切换 -->
        <text>点击{{cover?'切换':'添加'}}封面</text>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        cover: ''
      };
    },
    methods: {
      // 方式一：使用箭头函数
      upload() {
        uni.chooseImage({
          count: 1, //默认9,这里设置只允许选择一张图片
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
          success: res => {
            // 实际开发中，成功的回调函数中是一个上传图片到服务器的接口，这里只是做了简单的效果，实际根据接口需要的参数格式进行上传
            // console.log(JSON.stringify(res.tempFilePaths)); 打印的结果是以数组方式返回的，所以我们只需要取第一个值：["blob:http://localhost:8080/c18cded6-ab83-4d0e-9ccd-ce2e402b7d3f"] 
            this.cover = res.tempFilePaths[0] // 将选择的图片赋值给我们定义的cover
          }
        });
      }
      // 方式二：不使用箭头函数（不使用箭头函数就需要定义变量去赋值this,如下_this）
      // upload() {
      //  var _this = this
      //  uni.chooseImage({
      //    count: 1, //默认9,这里设置只允许选择一张图片
      //    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      //    sourceType: ['album'], //这里选择从相册选择，也可删除此项设置默认拍照和相册两种选择
      //    success: function(res) {
      //      _this.cover = res.tempFilePaths[0]
      //    }
      //  });
      // }
    }
  }
</script>
<style lang="scss">
  .cover {
    width: 100%;
    height: 350rpx;
  }
  .default {
    background-color: #f8f9fc;
    width: 100%;
    height: 350rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: red;
    font-weight: 800;
    position: absolute;
    top: 0;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .add-icon {
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 20rpx;
  }
</style>