Uniapp 网络接口请求 图片上传封装和使用
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 => {
//上传结果
})
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)