uniapp --request请求封装，uploadFile上传文件封装，上传多张图片

最新推荐文章于 2023-12-20 13:59:42 发布

Shiki2147

最新推荐文章于 2023-12-20 13:59:42 发布

阅读量4.5k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/Shiki2147/article/details/117962945

版权

本文档展示了如何在uniapp中封装request请求和uploadFile上传文件的方法。通过sendRequest函数实现了GET和POST请求的封装，处理了各种HTTP状态码的异常情况。sendUploadFile函数用于上传文件，同样处理了请求头和成功失败回调。在vue组件中，这两个函数被用来获取数据和上传图片，提供了一种统一的API调用方式。

摘要由CSDN通过智能技术生成

uniapp --request请求封装，uploadFile上传文件封装

request.js

 
var apiUrl = 'http://192.168.1.156:9527'; //放入后台接口的url
 
//封装request请求
const sendRequest = (url, method, data = {}, contentType) => {
	// 判断header提交数据类型
	let types = '';
	//contentType不指定，则默认'application/json;charset=UTF-8'
	if (method == 'POST' && !contentType) {
		types = 'application/json;charset=UTF-8'
	} else if (method == 'POST' && contentType) {
		//如果有contentType格式要求，则使用该格式
		types = contentType
	} else {
		// 否则默认为GET---'application/json'
		types = 'application/json';
	}
	var token = uni.getStorageSync('userInfo').token.token || '';
	console.log(token,'正在请求request方法');
	return new Promise(function(resolve, reject) {
		uni.request({
			url: apiUrl+url,
			data: data,
			method: method,
			sslVerify:false,
			header: {
				'Content-Type': types,
				'token': token
			},
			success(res) {
				//输出请求成功结果
				console.log("请求成功的结果", res.statusCode,res)
				//http状态码错误提示
				var code = res.statusCode;
				switch (code) {
					case 401:
						uni.showModal({
							title: '登录提示',
							content: '身份已过期，请重新登录后再来操作！',
							success:ress => {
								if (ress.confirm) {
									uni.redirectTo({
										url:'/pages/login/login'
									})
								}
							}
						})
						break;
					case 400:
						console.log('请求参数错误')
						break;	
					case 403:
						console.log('请求参数错误')
						break;
					case 404:
						console.log(`请求地址出错: ${error.config.url}`)
						break;
					case 408:
						console.log('请求超时')
						break;
					case 500:
						console.log('服务器内部错误')
						break;
					case 501:
						console.log('服务未实现')
						break;
					case 502:
						console.log('网关错误')
						break;
					case 503:
						console.log('服务不可用')
						break;
					case 504:
						console.log('网关超时')
						break;
					case 505:
						console.log('版本不受支持')
						break;
					default:
			在这里插入代码片			resolve(res);
						break;
				}
			},
			fail(err) {
				reject(err);
			}
		})
	})
}


//封装uploadFile上传文件请求
const sendUploadFile = (url, filePath, name, data) => {
	var token = uni.getStorageSync('userInfo').token.token || '';
	console.log(token,'正在请求uploadFile上传文件');
	return new Promise(function(resolve, reject) {
		uni.uploadFile({
			url: apiUrl + url, //请求接口地址
			filePath: filePath, //文件地址
			name: name,
			formData: data || '' ,
			header: {
				'token': token
			},
			success(res){
				console.log("请求成功的结果", res.statusCode,res);
				resolve(res);
			},
			fail(err){
				console.log("请求失败的结果", res);
				reject(res);
			}
		})
	})
}

 
module.exports.sendRequest = sendRequest
module.exports.sendUploadFile = sendUploadFile

main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import http from './common/request.js'
 
Vue.config.productionTip = false;
Vue.prototype.$store = store;
Vue.prototype.$urls = ""; //线上url接口
Vue.prototype.$http = http;

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount(); //为了兼容小程序及app端必须这样写才有效果

vue中使用—request

getData(){
				this.$http.sendRequest(
				    '/wms/home/homepage',//url地址
					"GET",//请求方式
				    {   //请求的参数
						userId:this.userid,
					},
				).then(res=>{//请求成功		
					if(res.statusCode==200){
						console.log("请求成功")
						this.name=res.data.data.user.userName,
						this.url=res.data.data.user.avatar
						this.$nextTick(function() {
							this.url=res.data.data.user.avatar
						});
						// this.$set(this.url,res.data.data.user.avatar)
						console.log(this.url)	
					}	
				}).catch(err=>{
					console.log(err)
				});
			},

vue中使用—UploadFile
可上传多张图片

openChooseImg(){
				let _this=this
				uni.chooseImage({
					count: 3, //默认9
					// sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album','camera'], //从相册选择，和摄像头功能，默认二者都有
					// name:'file',
					success: res=> {
						res.tempFilePaths.forEach(function(item,index){
							let img=res.tempFilePaths[0]
							console.log(img)
							_this.$http.sendUploadFile(
								'/wms/Print/filesUpload',
								item,
								'file',
								{detail_id:1}
							).then(res=>{
								console.log(res.data)
								console.log(JSON.parse(res.data).data)
								_this.imgNewUrl=JSON.parse(res.data).data
							}).catch(err=>{
							})
						})
						
		
						
						
					}
				});
			},