uniapp文件上传,视频上传,扫码功能

一.一 图片上传

image.png

代码实现

 uploadImg() {
      uni.chooseImage({
        count: 3,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          console.log(res);
          var that = this;
          // that.imgArr = res.tempFilePaths;
          // console.log(that.imgArr)
          uni.showLoading({
            mask: true,
            title: "上传中...",
          });
          let imgArr = that.imgArr;
          let tempFilePaths = res.tempFilePaths;

          for (let i in tempFilePaths) {
            if (i >= 3 - imgArr.length) {
              uni.hideLoading();
              break;
            }
            let fileName = "";
            fileName = tempFilePaths[i].substr(
              tempFilePaths[i].lastIndexOf("/") + 1
            );
            console.log(fileName);
            uni.uploadFile({
              url: this.base_url + "/api/IPadRepairOrder/Upload",
              filePath: tempFilePaths[i],
              name: "file",
              fileType: "image",
              formData: {
                file: tempFilePaths[i],
                imagePath: fileName,
              },
              // 需要权限的时候 要单独在这个地方加一个header 获取到登录时的权限token,这样才会在图片上传的时候请求成功 
              header: {
                 Authorization: "bearer " +  uni.getStorageSync("token"),
               },
              success(res) {
                uni.hideLoading();
                var result = JSON.parse(res.data);
                let src =
                  "http://139.9.28.12:8098/api/BaseProject/ReadImage?imagePath=";
                if (res.statusCode == 200) {
                  that.imgArr.push(src + result.data[0].newFile);
                } else {
                  uni.showModal({
                    title: "失败",
                    showCancel: false,
                  });
                }
              },
              fail(e) {
                if (e) {
                  console.log(e);
                  uni.showModal({
                    title: "错误",
                    content: e.errMsg,
                    showCancel: false,
                  });
                }
              },
            });
          }
        },
      });
    },
  

一.二. 图片预览

 // 文件预览
    previewImg(cur) {
      console.log(cur);
      uni.previewImage({
        current: cur,
        urls: this.imgArr,
      });
    },

实际截图

image.png

二. 视频上传

image.png

具体代码

 videoAdd() {
      var that = this;
      uni.chooseVideo({
        maxDuration: 60, // 最大为60秒
        count: 1,
        compressed: true,
        camera: that.cameraList[this.cameraIndex].value,
        sourceType: ["album", "camera"],
        success: (res) => {
          let tempFilePath = res.tempFilePath;
          let fileName = "";
          fileName = tempFilePath.substr(tempFilePath.lastIndexOf("/") + 1);
          let src =
            "http://137.9.28.100:8089/api/BaseProject/ReadImage?imagePath=";
          let a = "";
          uni.showLoading({
            mask: true,
            title: "上传中...",
          });
          uni.uploadFile({
            url: url + "/api/IPadRepairOrder/Upload",
            filePath: tempFilePath,
            name: "file",
            fileType: "video",
            // 需要权限的时候 要单独在这个地方加一个header 获取到登录时的权限token,这样才会在图片上传的时候请求成功 
            header: {
                 Authorization: "bearer " +  uni.getStorageSync("token"),
              },
            success(res) {
              uni.hideLoading();
              var result = JSON.parse(res.data);
              a = src + result.data[0].newFile;
              if (res.errMsg == "chooseVideo:ok") {
                that.videoSrc = src + result.data[0].newFile;
              } else {
                that.videoSrc = src + result.data[0].newFile;
              }
            },
          });

          if (that.compress && res.size / 10240 > 1025) {
            that.videoSrc = this.videoCompress(a);
            console.log(that.videoSrc);
          }
        },
      });
    },

    // 视频压缩
    videoCompress(tempFilePath) {
      uni.showLoading({
        title: "压缩中...",
      });
      uni.compressVideo({
        src: tempFilePath,
        quality: "low", //'low':低，'medium':中，'high':高
        success: function (res) {
          console.log("压缩后", res);
        },
        fail: function (err) {
          uni.showToast(
            {
              title: "视频压缩失败",
              icon: "none",
            },
            2000
          );
        },
      });
    },

三.扫码功能

image.png

 <view class="ad-new-from o-h m-t-20 m-l-10">
          <view>
            <text class="left-right-style float-l f-20">故障设备</text>
            <input
              class="float-l f-20 input-230-style-bordernone"
              type="text"
              v-model="NewAddrepairsFrom.equipmentFailure"
              placeholder="请选择故障设备"
              disabled
              @click="goToSelectDiviceDetail"
            />
          </view>
          <text class="text-style float-l" @click="scanInfo">  
            <image src="@/static/img/sidebarIcon/sweep1.png" mode=""></image>
          </text>
        </view>

// 我在项目中写的是一个混入, 我直接把混入的代码提出来了,好方便查看代码
 scanInfo() {
      var that = this;
      uni.scanCode({
        // onlyFromCamera: true,
        success: function (res) {
          let resultValue = JSON.parse(res.result);

          that.NewAddrepairsFrom.equipmentFailure = resultValue.deviceName;
          that.NewAddrepairsFrom.newAddrepairsDeviceNum = resultValue.deviceNumber;
          that.NewAddrepairsFrom.newAddrepairsDeviceLine = resultValue.lineName;
          that.NewAddrepairsFrom.newAddrepairsDeviceType = resultValue.deviceType;
          that.NewAddrepairsFrom.newAddrepairsDeviceLineId = resultValue.lineId;
          that.NewAddrepairsFrom.newAddrepairsDeviceConfigId = resultValue.configId;
          that.NewAddrepairsFrom.newAddrepairsDeviceDeviceId = resultValue.deviceId;
          that.NewAddrepairsFrom.isShowDeviceInfo = true;
        },
      });
    },