• 首页
  • 邻居
  • 关于
  • 归档
  • 搜索
  • 夜间模式
    ©2020-2026  我的学习笔记 Theme by OneBlog

    我的学习笔记博客

    搜索
    标签
    # 随笔 # Java # 教程 # openwrt # Mysql # SQL # 爬虫 # post # Js调优 # MAVEN
  • 首页>
  • 随笔>
  • 正文
  • uniapp—H5 上传图片,拍照上传的问题总结

    2024年12月27日 1.1 k 阅读 0 评论 1001 字

    一、uniapp-H5上传图片会出现那些问题尼?

    uniapp官方背大锅,h5端与其他小程序、app在这个地方的处理方式不同,filePath支持其他,唯独h5不行
    

    ——h5端上传前必须转为file对象上传,其他端直接filePath就ok;

    uni.uploadFile()上传blob文件给服务端后,后端获取file对象的时候,没法获取后缀名(小程序,app上面有后缀名),从而上传失败

    通过uni.chooseimage() 选择图片,将blob路径传递给后端

    将base编码图片转成blob文件路径,上传

    将图片进行处理(譬如图片压缩,或者uni.canvasToTempFilePath() 处理后),转成blob上传

    用第三方插件处理的图片返回的blob,直接上传

    ——h5端上传前必须转为file对象上传

    在ios真机在调试过程中会出现后端成功返回数据,但是前端接受不到数据的情况就报错了,原因是文件过大

    ——方法一:uploadFile直接设置超时请求(时间长) 方法二:对图片进行压缩处理(像素降低)

            /**
             * 上传到服务器
             * @description 这块需要您自行处理
             * @param {Object} file - 要上传的file对象
             * @return void
             */
            upload(file) {
                uni.uploadFile({
                    name: 'file',
                    url: '您的上传接口!!',
                    
                    // 这块需要额外注意,h5必须使用"file",并且只接受file对象
                    file: file,
                    // END
                    
                    fileType: 'image', 
                    success: (res) => {
                        console.log('上传成功', res)
                        uni.showToast({
                            title: '上传成功',
                            icon: 'none'
                        })
                    }
                })
            },
    本文著作权归作者 [ admin ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    取消回复

    发表留言
    回复

    首页邻居关于归档
    Copyright©2020-2026  All Rights Reserved.  Load:0.027 s
    京ICP备18019712号
    Theme by OneBlog V3.6.5
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。