小程序 图片上传

小程序图片上传

Taro框架

template

<view class="top_img flex">
      <view class="text">
        上传人像图片
      </view>
      <view
        @tap="chooseImages"
      >
        <image
          class="images"
          :src="img1 != '' ? img1 : img"
          alt=""
        />
      </view>
    </view>

script

  data() {
    return {
      //没图片时候默认显示这一个添加标识
      img: require("../../static/image/card/sbbb@2x.png"), 
      img1: "",
    };
  },
  methods: {
   chooseImages() {
      const that = this;
      Taro.chooseImage({
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          console.log(res);
          let file = res.tempFilePaths[0];
          that.files = res.tempFilePaths[0];
          console.log(file);
          Taro.getImageInfo({
            src: file,
            success(imageInfo) {
              var imgType = imageInfo.type;
              console.log(imageInfo);
              Taro.getFileSystemManager().readFile({
                filePath: file, //选择图片返回的相对路径
                encoding: "base64", //这个是很重要的
                success: (res) => {
                  //成功的回调
                  //返回base64格式
                  var base64Str =
                    "data:image/" + imgType + ";base64," + res.data;
                  that.img1 = base64Str;
                  var img = res.data;
                  console.log(img);
                  // 需要上传到后端接口
                  that.uploadImgs(img);
                },
                fail: (err) => {
                  console.log(err);
                  reject(err);
                },
              });
            },
          });
        },
      });
    },
    uploadImgs(img) {
      接口名称({
      // 接口入参
        userId: this.user.userId,
        image: img,
      }).then((res) => {
        console.log(res);
      });
    },
    },   

css

.top_img {
  padding: 20px;
  margin-top: 140px;
  .text {
    width: 150px;
    margin-right: 50px;
  }
}```