uni小程序上传图片,兼容安卓机不会自动弹出相机选项的写法

原本是用的没有设置 itemList: ["拍照", "选择本地相册"],但是在安卓手机中点击图标不能弹出下图2,而是直接打开了手机相册,所以需要自己写一个数组展示

image.png image.png

index.vue//[点击相机图片弹出拍照和选择本地相册的弹框,去选择/上传成功展示图片]

     <view class="section section2 ">
        <label class="section__title section__title1"
          ><text style="color:red;"></text>
          <text style="margin-left:10rpx;">上传图片</text>
        </label>
        <img
          src="../../../static/images/cramer.png"
          class="cramer"
          @click="chooseImg"
        />
      </view>

      <!--  这里是展示上传成功的图片-->
     <view class="view_img">
        <li v-for="(item, index) in fileList" :key="index">
          <img :src="item.url" @click="preview(item)" class="img" />
          <img
            src="../../../static/images/no.png"
            class="dell"
            @click="del(item, index)"
          />
        </li>
      </view>

//点击调用弹框 ["拍照", "选择本地相册"],上传本地图片

    chooseImg(file) {
      var that = this;
      wx.showActionSheet({
        itemList: ["拍照", "选择本地相册"],
        itemColor: "",
        //成功时回调
        success: function(res) {
          if (!res.cancel) {
            if (res.tapIndex == 0) {
              that.chooseImage1(0);
            } else if (res.tapIndex == 1) {
              that.chooseImage1(1);
            }
          }
        },
        //失败时回调
        fail: function(res) {
          console.log("调用失败");
        },
      });
    },

    chooseImage1(tapIndex) {
      var that = this;
      wx.chooseImage({
        count: 1, //一次只能选择单张
        sizeType: ["original", "compressed"],
        sourceType: [that.sourceType[tapIndex]],
        success: function(res) {
          // 预览图片
          const tempFilePaths = res.tempFilePaths[0];
          that.show1 = true;

          uni.uploadFile({
             url: "http://**/upload", //测试//这里写的是http访问地址+upload上传图片的接口
            filePath: tempFilePaths, // uni.chooseImage函数调用后获取的本地文件路劲
            name: "file", //后端通过'file'获取上传的文件对象
            header: {
              "Content-Type": "multipart/form-data",
            },
            success: (res) => {
              var data = JSON.parse(res.data);
              const { fileList = [] } = res.data;
              fileList.push({
                url: JSON.parse(res.data).data,
                deletable: true,
              });
              if (that.fileList.length >= 3) {//数组最多选择三张
                uni.showToast({
                  title: "提交图片不超过3张",
                  icon: "none",
                });
                return;
              }
              for (let i in fileList) {
                that.fileList.push(fileList[i]);
              }
            },
          });
        },
      });
    },

  

//点击图片预览

  preview(item) {//d点击图片预览
      uni.previewImage({
        urls: [item.url], //拿vuex中的头像地址
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function(data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function(err) {
            console.log(err.errMsg);
          },
        },
      });
    },

下图是图片展示和预览

image.png image.png