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

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>
 onLoad () {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"即可
        }})},

pages.json

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

用的

uview-ui 1.x版本