本人记性极差，所以经常总结工作中遇到的一些难题笔记，用来加深记忆，下次用到同样的问题可以直接拿来看，提高工作中的效率。
此文章是工作中的笔记，描述可能不是那么清楚，有问题，大家可加我微信一起交流学习。
此文章是我在做微信小程序头像上传的时候记录总结
首先配置上传地址
我的项目在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
