uniapp->开发APP的坑点,文件上传，选择方面

标签：uniapp 坑点 data APP avatarBase64 url res uni 上传

1.文件上传 uni.uploadFile 在H5端可以上传成功，在APP无法上传成功， 1.先检查url:必须是全路径，之前是

url: '/api/test' 所以上传不上去,

2,manifest配置权限

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.FLASHLIGHT"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>

 

     uni.uploadFile({
        url: config.baseUrl + '/api/test',
        filePath: file.url,
        header: {
          Authorization: uni.getStorageSync('authorization')
        },
        name: 'file',
        success: (uploadRes) => {
          let data = JSON.parse(uploadRes.data)
          if (data.status == 200) {
            uni.showToast({
              title: "上传成功",
              icon: 'none'
            })
            this.formFileLists[0] = {
              url: data.obj
            }
          } else {
            uni.showToast({
              title: data.message,
              icon: 'none'
            })
          }
        },
        fail: (err) => {

          // 处理上传失败的情况

        }

      });

3.多文件上传建议用

lsj-upload插件,主要记住accept，是原生弹框的时候，只弹相机，文件....这种控制

 // 限制允许上传的格式，空串=不限制，默认为空
      accept: 'image/*, application/msword, application/pdf',
      formats: '.txt,.png,.jpg,.mp4,.doc,.wps,.docx,.xls,.xlsx,.pdf',

4.用户上传图像，裁剪头像

info.vue

 <u-button size="medium" shape="circle" class="u-m-t-40" style="font-size:34rpx" @click="chooseAvatar">上传近期正面照</u-button>
 onl oad () {
    uni.$on('uAvatarCropper', path => {
      this.avatarBase64 = path;
      uni.uploadFile({
        url: config.baseUrl + '/api/convenient/person/uploadFile',
        header: {
          Authorization: uni.getStorageSync('authorization')
        },
        filePath: path,
        name: 'file',
        success: (res) => {
          let data = JSON.parse(res.data)
          let url = data.obj
          //获取到了远程图片后，上传图片
          let params = {
            userId: this.vuex_user.id,
            photoRecent: url
          }
          this.$u.api.leaveData.editPhotoRecent(params).then(res => {
            if (res.status == 200) {
              this.$u.api.user.getUserInfo(this.username).then(res => {
                if (res.status == 200) {
                  this.$u.vuex('vuex_user', res.obj);
                  //this.$store.dispatch('start');
                  // uni.setStorageSync('userInfos', JSON.stringify(res.obj));
                  uni.showToast({
                    title: "上传成功",
                    icon: 'none'
                  })
                }
              });

              // uni.setStorageSync('userInfos', JSON.stringify(res.obj));
            }
          });
          console.log('data', data.obj)
        },
        fail: (err) => {
          console.log("upload fail",err)
        }
      });
      // if (this.avatarBase64 != '' && !this.avatarBase64.startsWith('data:')) {
      //   // #ifdef APP-PLUS
      //   let self = this, fileUrl = this.avatarBase64;
      //   plus.io.resolveLocalFileSystemURL(path, function (entry) {
      //     entry.file(function (file) {
      //       var fileReader = new plus.io.FileReader()
      //       fileReader.onload = function (data) {
      //         // console.log(data.target.result);
      //         self.avatarBase64 = data.target.result;
      //       }
      //       fileReader.onerror = function (error) { }
      //       fileReader.readAsDataURL(file)
      //     }, function (error) { })
      //   }, function (error) { });
      //   // #endif
      //   // #ifndef APP-PLUS
      //   this.avatarBase64 = 'data:image/jpeg;base64,' + uni.getFileSystemManager()
      //     .readFileSync(this.avatarBase64, "base64");
      //   // #endif
      // }
      console.log('选完了', path)
    })
  },
chooseAvatar () {
      this.$u.route({
        url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
        params: {
          destWidth: 800, // 输出图片宽高
          rectWidth: 200, // 裁剪框的宽高
          fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
        }
      })
    },

View Code

pages.json

{
      "path": "uview-ui/components/u-avatar-cropper/u-avatar-cropper",
      "style": {
        "navigationBarTitleText": "头像裁剪",
        "navigationBarBackgroundColor": "#000000"
      }
    },

用的

uview-ui 1.x版本

标签：uniapp,坑点,data,APP,avatarBase64,url,res,uni,上传
From： https://www.cnblogs.com/lsc-boke/p/18454502