uniapp 安卓app图片回显,默认不支持http图片地址,上传图片和回显图片

<view class="uni-form-item uni-column">
          <view class="title"><text class="corlorRed">*</text> 现场照片</view>
          <view class="photoStyle">
            <view class="photoItem">
              <view>故障全貌</view>
              <view class="btn" @click="uploadOption('1')">点击上传</view>
              <image
                v-if="img1"
                :src="img1"
                style="width: 25px; height: 25px; margin-left: 5px"
                @longpress="previewImage(img1)"
              ></image>
              <text
                v-else
                style="width: 25px; height: 25px; margin-left: 5px"
              ></text>
            </view>
            <view class="photoItem">
              <view>故障详情</view>
              <view class="btn" @click="uploadOption('2')">点击上传</view>
              <image
                v-if="img2"
                :src="img2"
                style="width: 25px; height: 25px; margin-left: 5px"
                @longpress="previewImage(img2)"
              ></image>
              <text
                v-else
                style="width: 25px; height: 25px; margin-left: 5px"
              ></text>
            </view>
            <view class="photoItem">
              <view>维修详情</view>
              <view class="btn" @click="uploadOption('3')">点击上传</view>
              <image
                v-if="img3"
                :src="img3"
                style="width: 25px; height: 25px; margin-left: 5px"
                @longpress="previewImage(img3)"
              ></image>
              <text
                v-else
                style="width: 25px; height: 25px; margin-left: 5px"
              ></text>
            </view>
          </view>
        </view>

压缩图片需要安装插件 const ImageCompressor = require("js-image-compressor");

// 预览图片
    previewImage(url) {
      uni.previewImage({
        current: url, // 当前显示图片的 URL(可选,默认显示第一张)
        urls: [url], // 需预览的图片列表(单张需用数组)
        success: () => {}, // 可选回调
        fail: (err) => console.log("预览失败:", err),
      });
    },
    //转为文件
    base64ToFile(urlData, fileName) {
      let arr = urlData.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]);
      let n = bytes.length;
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], fileName, { type: mime });
    },
    getImgUrl(imgUrl, index) {
      uni.request({
        url: imgUrl, // 替换为你的图片URL
        responseType: "arraybuffer",
        success: (res) => {
          let base64 = wx.arrayBufferToBase64(res.data);
          let imageSrc = "data:image/jpg;base64," + base64;
          // 将图片URL设置给图片元素的src属性
          if (index == 1) {
            this.img1 = imageSrc;
          } else if (index == 2) {
            this.img2 = imageSrc;
          } else if (index == 3) {
            this.img3 = imageSrc;
          }
        },
      });
    },
    // 压缩图片
    compressionImage(file, index) {
      let _this = this;
      let content = null;
      let readfile = new FileReader();
      return new Promise((resolve, reject) => {
        // eslint-disable-next-line no-new
        new ImageCompressor({
          file: file,
          quality: 0.8,
          maxWidth: 88,
          maxHeight: 88,
          redressOrientation: false,
          // 压缩前回调
          beforeCompress: function (result) {
            // console.log('压缩之前图片尺寸大小: ', result.size)
            // console.log('mime 类型: ', result.type)
          },

          success: function (result) {
            // console.log("压缩之后图片尺寸大小: ", result.size, result);
            // console.log("mime 类型: ", result.type);
            // console.log(
            //   "实际压缩率: ",
            //   (((file.size - result.size) / file.size) * 100).toFixed(2) + "%"
            // );

            content = readfile.readAsDataURL(result, "UTF-8");
            readfile.onload = function (event) {
              content = event.target.result;
              let blod = _this.base64ToFile(
                content,
                new Date().getTime() + ".png"
              );
              // 调用后端上传接口
              uni.uploadFile({
                url: _this.$baseUrl + "/order/ftp/5g/uploadFile",
                filePath: file.path, // 选择的图片路径
                name: "file", // 后端接收文件的字段
                header: {
                  Authorization: _this.userInfo.token,
                },
                success: (res) => {
                  let data = JSON.parse(res.data).data;
                  uni.showToast({
                    title: "上传成功",
                    icon: "success",
                  });
                  _this.form.images[index] = [
                    {
                      fileName: data.fileName,
                      fileUrl: data.fileUrl,
                      type: index,
                    },
                  ];
                  if (index == 1) {
                    // _this.img1 = _this.$baseUrlImg + data.fileUrl;
                    // #ifdef H5
                    _this.img1 = _this.$baseUrlImg + data.fileUrl;
                    // #endif

                    // #ifdef APP-PLUS
                    let imgUrl = _this.$baseUrlImg + data.fileUrl;
                    _this.getImgUrl(imgUrl, 1);
                    // #endif
                  } else if (index == 2) {
                    // _this.img2 = _this.$baseUrlImg + data.fileUrl;
                    // #ifdef H5
                    _this.img2 = _this.$baseUrlImg + data.fileUrl;
                    // #endif

                    // #ifdef APP-PLUS
                    let imgUrl = _this.$baseUrlImg + data.fileUrl;
                    _this.getImgUrl(imgUrl, 2);
                    // #endif
                  } else if (index == 3) {
                    // _this.img3 = _this.$baseUrlImg + data.fileUrl;
                    // #ifdef H5
                    _this.img3 = _this.$baseUrlImg + data.fileUrl;
                    // #endif

                    // #ifdef APP-PLUS
                    let imgUrl = _this.$baseUrlImg + data.fileUrl;
                    _this.getImgUrl(imgUrl, 3);
                    // #endif
                  }
                },
                fail: (err) => {
                  console.error("上传失败", err);
                  uni.showToast({
                    title: "上传失败,请重试",
                    icon: "none",
                  });
                },
              });
            };
            resolve(result);
          },
          error(e) {
            reject(e);
          },
        });
      });
    },
    uploadOption(index) {
      let _this = this;
      uni.chooseImage({
        count: 1, // 一次选择一张图片
        sizeType: ["original", "compressed"], // 可选择原图或压缩图
        sourceType: ["album", "camera"], // 可从相册或相机选取图片
        success: function (e) {
          // console.log(11111111, e);
          _this.compressionImage(e.tempFiles[0], index);
        },
        fail: function (err) {
          console.log(err);
        },
      });
    },
相关推荐
三天不学习3 分钟前
uniapp x 学习之 uts 语言快速入门
学习·uni-app
ljx140005255038 分钟前
Android AudioFlinger(一)——初识AndroidAudio Flinger
android
ljx140005255040 分钟前
Android AudioFlinger(四)—— 揭开PlaybackThread面纱
android
Codingwiz_Joy41 分钟前
Day04 模拟原生开发app过程 Androidstudio+逍遥模拟器
android·安全·web安全·安全性测试
叶羽西43 分钟前
Android15 Camera框架中的StatusTracker
android·camera框架
梦中千秋1 小时前
安卓设备root检测与隐藏手段
android
人民广场吃泡面1 小时前
UniApp 运行的微信小程序如何进行深度优化
微信小程序·小程序·uni-app
buleideli1 小时前
CameraX学习2-关于录像、慢动作录像
android·camerax
程序员大澈2 小时前
4个 Vue 路由实现的过程
javascript·vue.js·uni-app
stevenzqzq3 小时前
android paging使用教程
android