uniapp 全局封装网络请求，上传文件

最新推荐文章于 2024-07-15 10:34:14 发布

B2689429488

最新推荐文章于 2024-07-15 10:34:14 发布

阅读量503

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/B2689429488/article/details/125654905

版权

**1.创建文件request.js**
import {getUserToken,getAppid} from '../api/auth.js'
const request = {}
const headers = {}
// #ifdef APP-PLUS ||MP
	const APP_URL = 'https://xxxxxxxxx/store'
	// #endif
	// #ifdef H5
	const APP_URL = '/store'
	// #endif	
	
	
request.globalRequest = (url, method, data,power) => {
	var token = getUserToken();
	var appid = getAppid()
	console.log(appid);
	switch (power){
	    case 1:
	        headers['Access-Control-Allow-Origin'] = 'Basic a3N1ZGk6a3N1ZGk='
			headers['platform'] = 'h5'
			headers['wxapp_id'] = appid
			headers['content-type'] = 'application/json; charset=utf-8'
	        break;
	    case 2:
	        headers['Authorization'] = 'Basic a3N1ZGlfcGM6a3N1ZGlfcGM='
			headers['platform'] = 'h5'
			headers['wxapp_id'] = appid
			headers['content-type'] = 'application/json; charset=utf-8'
	        break;
	    default:
			headers['Access-Token'] = token
			headers['platform'] = 'h5'
			headers['wxapp_id'] = appid
			headers['content-type'] = 'application/json; charset=utf-8'
	        break;
	}
	//console.log('tsttt');
	
	//console.log(url);
	return uni.request({
		//'http://adminapi.dev.tuoyukj.com/prod_api' 
	
		url:APP_URL+url,
		method,
		data: data,
		dataType: 'json',
		header: headers,
	}).then(res =>{
		console.log(res[1].data.status)
		return res[1].data
		if(res[1].data.status==401){
			uni.reLaunch({
				url:'/pages/index/index.vue'
			})
		}
	})
}
request.urlUpload = (url,filepath)=>{
	return new Promise((resolve, rejct) => {
		var token = getUserToken();
			uni.uploadFile({
		       url :APP_URL+url ,
		      filePath: filepath,
		      name: 'iFile',
			  header: {
				'Access-Token': token
				},
		      success: function (res) {
		      resolve(res);
		      }
		     });
		});
}

export default request

2.创建index.js文件
import request from '../common/request.js'

const api = {}

api.login = params => request.globalRequest(`/passport/login`, 'POST', params)
api.imgupload = params => request.urlUpload(`/upload/image`,params)

export default api

3.在main.js全局挂载
import request from './common/request.js'
import api from './api/index.js'
Vue.prototype.$request = request
Vue.prototype.$api = api

4.在vue页面使用
<template>
	<view style="width: 100%;height: 100%;">
		<view class="box">
			<view class="imgup">
				<view class="app-box image">
					<view class="app-title">
						LOGO：
					</view>
					 <view class="app-rigth">
						<view class="img" @click="uploads">
							<img :src="logoshow"></img>
						</view>
					</view>
				</view>
				<view class="app-box image">
					<view class="app-title">
						APP启动页：
					</view>
					 <view class="app-rigth">
						<view class="img" @click="upload">
							<img :src="logoshows"></img>
						</view>
					</view>
				</view>
				<view class="app-box">
					<view class="app-title">
						APP名称：
					</view>
					 <view class="app-rigth">
						 <input type="text" value="" v-model="name" placeholder="请输入app名称"/>
					</view>
				</view>
				<view class="app-box image">
					<view class="app-title">
						下载：
					</view>
					 <view class="app-rigth">
						 <button type="default" style="font-size: 28upx;position: relative;top: 60upx;border:2upx solid #2097F5;color: #2097F5;background-color: #FFFFFF;width: 80%;letter-spacing: 2upx;"@click="urlshow()">生成二维码</button>
						<!-- <vue-qr :text="down_url" :size="100"></vue-qr> -->
						<!-- <ayQrcode ref="qrcode" qrcode_id="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="300" :width="300" /> -->
					</view>
				</view>
			</view>
		</view>
		<button type="primary" style="margin-top: 10upx;" @click="appsubmit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoshow:'',
				name:'',
				logoshows:'',
				appId:''
			}
		},
		methods: {
			urlshow(){
				uni.navigateTo({
					url:'../downurl?appid='+ this.appId
				})
			},
			uploads(){
				let that=this;
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: function(res) {
						that.logoshow = res.tempFilePaths[0]
						const tempFilePaths = res.tempFilePaths;
						//方法二（解决h5跨域）
						that.$api.imgupload(tempFilePaths[0]).then(res=>{
							var a = JSON.parse(res.data)
							console.log(a)
							if(a.status == 200){
								that.logoid = a.data.fileInfo.file_id
								console.log(that.logoid)
							}else{
								uni.showToast({
									title:a.message
								})
							}
						})
				    }
				    });
					
			},
			upload(){
				let that=this;
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['album'],
				    success: function(res) {
						that.logoshows = res.tempFilePaths[0]
						const tempFilePaths = res.tempFilePaths;
						//方法二（解决h5跨域）
						that.$api.imgupload(tempFilePaths[0]).then(res=>{
							var a = JSON.parse(res.data)
							console.log(a)
							if(a.status == 200){
								that.logoids = a.data.fileInfo.file_id
								console.log(that.logoid)
							}else{
								uni.showToast({
									title:a.message
								})
							}
						})
				    }
				    });
					
			},
			appsubmit(){
				this.$api.edit({form:{logo_id:this.logoid,app_splash:this.logoids,name:this.name},appId:this.appId}).then(res => {
						// 获得数据
						if(res.status == 200){
							uni.showToast({title:'修改成功'});
						}else{
							uni.showToast({title:res.message});
						}
					})
					.catch(res => {
						// 失败进行的操作
					});
			},
			getlist(){
				this.$api.detail({appId:this.appId}).then(res => {
						// 获得数据
						if(res.status == 200){
							console.log(res)
							this.logoshow = res.data.detail.app_logo
							this.logoshows = res.data.detail.app_splash
							this.name = res.data.detail.name
						}else{
							uni.showToast({title:res.message});
						}
					})
					.catch(res => {
						// 失败进行的操作
					});
			},
		},
		onLoad(option) {
			console.log(option.id)
			this.appId = option.id
			 this.getlist()
			// this.showQrcode();//一加载生成二维码
		},
	}
</script>

<style  lang="scss">
	page{
		width: 100%;
		height: 100%;
		background-color: #EEEFF1;
		padding-top: 20upx;
	}
	.box{
		height: 90%;
		width: 100%;
	}
	.imgup{
		width: 94%;
		margin: 0 3%;
		border-radius: 25upx;
		background-color: #FFFFFF;
		.app-box{
			font-size: 26upx;
			height: 100upx;
			width: 100%;
			background-color: #FFFFFF;
			border-radius: 15upx;
			line-height: 100upx;
			.app-title{
				width: 39%;
				height: 94%;
				padding: 0% 3%;
				float: left;
			}
			.app-rigth{
				width: 55%;
				height: 100%;
				float: right;
				color: #a2a2a2;
				text-align: right;
				.img{
					width: 150upx;
					height: 120upx;
					margin-top: 20upx;
					margin-right: 20upx;
					float: right;
					img{
						height: 100%;
						width: 100%;
					}
				}
				input{
					position: relative;
					top: 25upx;
					left: -30upx;
				}
			}
		}
		.image{
			height: 185upx;
			line-height: 185upx;
		}
	}
</style>