(小程序篇)12.上传图片封装

说明：封装结合lin-ui函数库的Promisic

1.定义js方法

在util目录下新建 upload.js

import {promisic} from './util';
import {config} from '../config/config'; // 配置参数

class Upload{
  static async picture({url, tempUrl, method="POST"}){
    const res = await promisic(wx.uploadFile)({
      url: `${config.apiBaseUrl}${url}`,  
      name: 'img',  // 图片上传给后台的参数名
      filePath: tempUrl,
    })
    return res.data;
  }
}
export {
  Upload
}

2.定义调用接口模型

在根目录下的model文件下新建 picture.js

import { Upload } from '../utils/upload';
class Picture{
  static async upPicture(tempUrl){
  	// 对应接口拼接上参数
    return await Upload.picture({
      url: 'upload/imgUploadOne', // 接口拼接参数名
      tempUrl      // 传递参数是wx.chooseImage 生成的图片地址
    });
  }
}
export {
  Picture
}

3.功能页面调用上传图片

index.js

import {Picture} from '../../model/picture'
page({
	...
	async upLoadPic(url){ // url是wx.chooseImage 生成的图片地址
		const picUrl = await Picture.upPicture(url);
  		return JSON.parse(picUrl).data;
	}
    ...
})