当前位置: 首页 > news >正文

微信小程序上传:form-data

  choose() {
    wx.chooseImage({
      count: 1, // 默认最多一次选择1张图
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: res => {
        console.log(res, 'chooseImage....')
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        //显示消息提示框
        wx.showLoading({
          title: '上传中...',
          mask: true
        })
        let self = this
        const token = wx.getStorageSync('token')
        //上传图片
        wx.uploadFile({
          url: 'https://xxx.com/api/user/uploadIdCard', // 上传的服务器接口地址
          filePath: res.tempFilePaths[0],
          name: 'id_card', //上传的所需字段,后端提供
          header: {
            'X-TOKEN': token
          },
          formData: {
            id_card: res.tempFilePaths[0],
          },
          success: (res) => {
            // 上传完成操作
            const url = JSON.parse(res.data).data
            const imgRealUrl = url.replace(/\\/, '')
            console.log('======上传成功图片地址为:', imgRealUrl)
            self.setData({
              id_card_img_positive: imgRealUrl
            })
            wx.hideLoading()
          },
          fail: (err) => {
            //上传失败:修改pedding为reject
            console.log(err, '上传失败')
          }
        });
      }
    })
  },

注意:小程序一定要配置合法上传域名。不然上传不成功。

相关文章:

  • mac显示.git文件
  • 微信小程序图片上传一直loading中,上传没反应
  • el-table拖动排序
  • vue项目进行前端埋点,记录页面菜单停留时间
  • input实现在移动端软键盘中显示“搜索”案件的注意事项
  • export, import 的用法详解
  • vue中ref的作用及用法
  • Vue中数据缓存localStroage
  • keep-alive实现数据缓存
  • keep-alive的使用
  • Vue项目中文件路径的引用问题
  • e.preventDefault()与e.stopPropagation()的区别
  • es6数组方法find()、findIndex()与filter()的总结
  • js数组对象(1个数组) 判断 | 两个属性值相同时,另外某个属性值相加
  • js数组对象去重(4种方法)
  • AHK 中 = 和 == 等比较运算符的用法
  • C++类的相互关联
  • CentOS7简单部署NFS
  • Debian下无root权限使用Python访问Oracle
  • Docker 笔记(2):Dockerfile
  • ES6之路之模块详解
  • iOS编译提示和导航提示
  • Java 内存分配及垃圾回收机制初探
  • k8s 面向应用开发者的基础命令
  • node-glob通配符
  • Redux系列x:源码分析
  • TypeScript迭代器
  • V4L2视频输入框架概述
  • 初探 Vue 生命周期和钩子函数
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 猴子数据域名防封接口降低小说被封的风险
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 力扣(LeetCode)21
  • 力扣(LeetCode)965
  • 推荐一个React的管理后台框架
  • 微信如何实现自动跳转到用其他浏览器打开指定页面下载APP
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 智能合约开发环境搭建及Hello World合约
  • 自定义函数
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 2017年360最后一道编程题
  • ​软考-高级-系统架构设计师教程(清华第2版)【第20章 系统架构设计师论文写作要点(P717~728)-思维导图】​
  • !!java web学习笔记(一到五)
  • # Swust 12th acm 邀请赛# [ E ] 01 String [题解]
  • #NOIP 2014# day.1 T2 联合权值
  • $NOIp2018$劝退记
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (定时器/计数器)中断系统(详解与使用)
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (算法)Game
  • (一)插入排序
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转)EOS中账户、钱包和密钥的关系
  • .NET Core WebAPI中使用swagger版本控制,添加注释
  • .net 按比例显示图片的缩略图