微信小程序wx.uploadFile实现图片上传

本人记性极差，所以经常总结工作中遇到的一些难题笔记，用来加深记忆，下次用到同样的问题可以直接拿来看，提高工作中的效率。
此文章是工作中的笔记，描述可能不是那么清楚，有问题，大家可加我微信一起交流学习。

此文章是我在做微信小程序头像上传的时候记录总结

首先配置上传地址

我的项目在config里面配置接口上传地址

const BASE_URL = '**********' // 此处为服务器地址
const UPLOAD_URL = '**********' // 此处为服务器地址
module.exports = {
    BASE_URL,
    UPLOAD_URL
};

封装 wx.uploadFile

• 找到utils.js

  
  
• 导入config里面的地址

import { UPLOAD_URL } from './config'

• 编写封装代码

const uploadFile = (uploadFile) => {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: UPLOAD_URL, // 上传的服务器接口地址
      filePath: uploadFile, 
      header: {  
        "Content-Type": "multipart/form-data",
        'token':  ''   //若有token，此处换上你的token，没有的话省略
      },
      name: 'file', //上传的所需字段，后端提供
      success: (res) => {
        // 上传完成操作
        const data = JSON.parse(res.data)
        resolve({
          data: data
        })
      },
      fail: (err) => {
        //上传失败：修改pedding为reject
        reject(err)
      }
    });
  })

module.exports = {
  uploadFile: uploadFile
}

应用到页面上

index.wxml

<image class="user-img" mode="aspectFill" bindtap="uploadImage" src="{{userInfo.avatar}}"></image>

index.js

import { uploadFile } from '../../utils/util'

async uploadImage() {
    let that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: async function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        let resImage = await uploadFile(tempFilePaths[0])
        if(resImage.data.code == 0) {
          that.setData({
            "userInfo.avatar": resImage.data.data
          })
         // 此处可执行保存头像接口
        }
        
      }
    })
  },

遇到的问题

在这个过程中遇到了一些问题总结如下：

• Provisional headers are shown 出现此报错

  
  

• uploadFile: fail Error: certificate has expird