uniapp在开发app时上传文件时的问题记录

 更新时间:2024年09月13日 09:20:43   作者:BUG创建者  
在开发uniapp应用时,可能会遇到文件上传功能在iOS和部分Android手机上不兼容的问题,经过对比分析,发现问题可能出在文件的路径上,通过使用uni.saveFile方法保存文件后,再上传可以解决问题,这篇文章详细介绍了解决方案,并引导读者参考更多相关内容

手机拍照然后上传没问题 但是在相册中选择的照片上传 ios手机不行 安卓一部分手机也点击没反应
最后对比了下参数 发现路径有所不同
使用uni.saveFile保存路径好在重新上传

  saveFileSync(tempFilePath){
   return new Promise((resolve, reject) => {
     uni.saveFile({
       tempFilePath,
       success: function (file) {
         resolve(file.savedFilePath)
       },
       fail: function (error) {
         reject(error)
       }
     })
   })
 },
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都
        sourceType: ['camera','album'], 
         success: async function(result) {
          let ewm = result.tempFiles[0]
          const path = await that.saveFileSync(ewm.path)
          if (result.errMsg === "chooseImage:ok") {
            result.tempFiles[0].path=path
            // that.upload(path);
            that.upload(result.tempFiles[0]);
          } else {
            uni.showToast({
              title: "图片上传失败",
              icon: "none",
            });
          }
        },
        fail(err) {
          uni.showToast({
            title: "取消上传",
            icon: "none",
          });
        },
      });
Upload(event) {
      const token = this.getToken();
      // const url = this.getuploadUrl();
      const imgList = [];
      uni.showLoading({
        title: "上传中...",
        mask: true,
      });
      try {
        const [err, res] = await uni.uploadFile({
          url: `${HOST}/resource/file/upload`,
          filePath: event.path,
          name: "file",
          header: {
            Authorization: token,
          },
        });
        if (res && (res.statusCode === 200)) {
          const result = JSON.parse(res.data);
          if (result.code == 200) {
            let res1 = JSON.parse(res.data);
              res1.data.uuid = res1.data.id;
              res1.data.paramskey = event.name;
              imgList.push(res1.data);
              const list = [...this.list, ...imgList];
              this.$emit("value", list);
              this.$emit("change", list);
              this.$emit("upload", imgList);
          } else {
            wx.showToast({
              icon: "none",
              title: result.msg,
            });
          }
        } else {
          wx.showToast({
            icon: "error",
            title: "上传失败",
          });
        }
      } catch (error) {
        console.log(error)
      }
      uni.hideLoading();
      this.$emit("upload", imgList);
    },

到此这篇关于uniapp在开发app时上传文件时的问题的文章就介绍到这了,更多相关uniapp上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    浅谈JavaScript事件绑定的常用方法及其优缺点分析

    下面小编就为大家带来一篇浅谈JavaScript事件绑定的常用方法及其优缺点分析。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • es6中比较有用的7个技巧小结

    es6中比较有用的7个技巧小结

    这篇文章主要给大家介绍了关于es6中比较有用的7个技巧,文中通过示例代码介绍的非常详细,对大家学习或者使用es6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 基于slideout.js实现移动端侧边栏滑动特效

    基于slideout.js实现移动端侧边栏滑动特效

    这篇文章主要为大家详细介绍了基于slideout.js实现移动端侧边栏滑动特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • javascript 中模板方法单例的实现方法

    javascript 中模板方法单例的实现方法

    这篇文章主要介绍了javascript 中模板方法单例的实现方法的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • 防止页面被iframe(兼容IE,Firefox火狐)

    防止页面被iframe(兼容IE,Firefox火狐)

    以前发布的防止被iframe的代码,容易在火狐浏览器下, 不断的刷新页面。所以从网站找到了这篇文章。
    2010-07-07
  • 老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    大家都知道CSS样式有三种类型:行内样式、内部样式和外部样式,这篇文章主要介绍了javaScript获取CSS样式的方法(兼容各浏览器),需要的朋友可以参考下
    2018-09-09
  • JS实现点击下载的小例子

    JS实现点击下载的小例子

    这篇文章介绍了JS实现点击下载的小例子,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript创建对象的常用方式总结

    JavaScript创建对象的常用方式总结

    这篇文章主要介绍了JavaScript创建对象的常用方式,结合实例形式总结分析了javascript面向对象程序设计中对象创建的常见方式、相关操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • videojs+swiper实现淘宝商品详情轮播图

    videojs+swiper实现淘宝商品详情轮播图

    这篇文章主要为大家详细介绍了videojs+swiper实现淘宝商品详情轮播图,轮播翻动,视频暂停,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Bootstrap每天必学之标签页(Tab)插件

    Bootstrap每天必学之标签页(Tab)插件

    Bootstrap每天必学之标签页(Tab)插件,通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论