Uniapp 网络接口请求 图片上传封装和使用

1.新建一个request.js文件 封装uni.request请求

//公共路径
let baseUrl =""
function request(obj) {
    uni.showLoading({
        title: '加载中'
    });
    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + obj.url,//地址
            method: obj.method,//请求方式
            data: obj.data,//参数
            header: {
                "token": uni.getStorageSync("token")
            },
            success: (res) => {
                uni.hideLoading();
                if (res.data.code == 200) {
                    resolve(res.data);
                } else if (res.data.code == 500) {
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000
                    });
                    reject(res)
                } 
 
            },
            fail: function(res) {
                uni.hideLoading();
                //reject(res);
                console.log('请求', res);
            },
        })
    })
}
//公共图片上传
const uploadFile = (obj) => {
 return new Promise((resolve, reject) => {
        uni.uploadFile({
		url: baseUrl + obj.url，//请求地址
		filePath: obj.data,//图片路径
		name: 'file',
		header: {
			"token": uni.getStorageSync("token")
		},
		timeout: 2000,
		// formData: data,
		success: (res) => {
			if (JSON.parse(res.data).code == 200) {
				resolve(JSON.parse(res.data))
				
			} 
		},
		fail: (error) => {
			console.log(error); //抛出异常
			if (error.errMsg == "uploadFile:fail timeout") {
				uni.showToast({
					title: '请求超时',
					mask: true,
					icon: 'error'
				})
			}
		},
		complete: () => {
			uni.hideLoading()
		}
	})
})
	
}
export default {
        request,
        uploadFile 
}

2.新建index.js 文件存放项目所需所有接口,引入封装的request.js

注：此页面作用是为了方便规范管理接口优化页面效果，以方便修改,如不需可直接在main.js中引入request.js，并全局声明调用。

import {request,uploadFile } from "./request.js"
 
export default{
	getList：(data)=>request({url:'/api/withDraw/apply',method:'get',data:data}),
    //例 轮播
    getSweiper：(data)=>request({url:'/api/withDraw/apply',method:'get',data:data}),

     //上传图片
    getUnload：(data)=>uploadFile({url:'/api/withDraw/unload',data:data}),

   
    
}

3.在main.js页面全局声明引入index.js,并在所需页面使用 

//main.js
//引入调用接口文件
import api from "@/api/index.js"
Vue.prototype.$api=api

//页面使用
this.$api.getList('请求数据').then(res => {
	//请求结果
})

//图片上传
uni.chooseImage({
	count: 1,
	izeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album', 'camera'], //从相册选择
	success: (res) => {
		var url = res.tempFilePaths[0] //本地图片路径
		this.$api.getUnload(url, res => {
		   //上传结果
	   })
	}
})