当前位置: 首页 > article >正文

uniapp 安卓端 使用axios 和 renderjs 上传 FormData 参数

<template>
	<view>
		<!--<button @click="request">调用 RenderJS 方法</button>-->
		<view v-show="false" :data="data" :change:data="requestModule.realRequest"></view>
	</view>
</template>

<script>
	import config from '@/config'
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				data: {
					url: '',
					formData: "",
					randomValue: ''
				}
			}
		},
		methods: {
			request(url, formData) {
				this.data = {
					url: config.baseUrl+url,
					formData: formData,
					authorization: getToken(),
					randomValue: Math.floor(1000 + Math.random() * 9000)
				}
			},
			response(resp) {
				console.log("resp", resp);
				this.$emit('response', resp);
			}
		}
	}
</script>

<script module="requestModule" lang="renderjs">
	import axios from 'axios';
	export default {
		methods: {
			realRequest(newValue, oldValue) {
				//const obj = JSON.parse(newValue);
				if(!newValue.url) {
					return
				}
				const formData = new FormData();
				formData.append('form', JSON.stringify(newValue.formData));
				
				axios.post(newValue.url, formData, {
				  headers: {
				    'Content-Type': 'multipart/form-data', // 确保设置正确的 Content-Type
					'Authorization': newValue.authorization
				  }
				})
				.then(response => {
				  //console.log('文件上传成功:', response.data);
				  this.$ownerInstance.callMethod("response", response);
				})
				.catch(error => {
				  console.error('文件上传失败:', error);
				  //this.$ownerInstance.callMethod("response", error);
				});
				
			}
		}
	};
</script>

<style>

</style>

调用

<template>
	<view>
		<button @click="request">调用 RenderJS 方法</button>
		<requestFormData ref="requestFormData" @response="response"></requestFormData>
	</view>
</template>

<script>
	import requestFormData from '@/components/requestFormData/requestFormData.vue';
	export default {
		components: {
		    requestFormData,
		},
		data() {
			return {
				
			}
		},
		methods: {
			request() {
				this.$refs.requestFormData.request('/foundation/api/mingmenDailyMiss/edit',{'businessData':JSON.stringify({'id':'1879451746490097665','name':'蓝颜来','birth':'1888-15-12','demiseTime':'2000-11-01','buriedIn':'南阳市','introduction':'我是简介','motto':'我是座右铭'}),'continuedUseFileIds':''});
			},
			response(e){
				console.log("父组件拿到响应", e);
			}
		}
	}
</script>

<style>

</style>


http://www.kler.cn/a/555008.html

相关文章:

  • 【个人总结】9. 通讯协议、物联网、DSP及FatFS文件系统 工作三年的嵌入式常见知识点梳理及开发技术要点(欢迎指正、补充)
  • 【C++】优先级队列宝藏岛
  • 关于databean.toString()为空的问题
  • 【新人系列】Golang 入门(一):基础介绍
  • 分布式数据库:架构演进、核心挑战与行业落地实践
  • SpringCloud面试题----服务注册和发现是什么意思?Spring Cloud如何实现
  • 推荐一款AI大模型托管平台-OpenWebUI
  • Debezium 与 Apache Kafka 的集成方式
  • EasyPoi系列之通用导入接口设计
  • 如何用ClassFinal加密JAR保护知识产权!
  • Spring中事务的传播行为方式
  • 如何看nginx.conf文件?
  • vue3学习1
  • ubuntu 执行 sudo apt-get update 报错
  • Spring扩展点实战-动态线程池
  • Rust编程语言入门教程 (七)函数与控制流
  • 在 Centos7 上部署 ASP.NET 8.0 + YOLOv11 的踩坑实录
  • Web 后端 请求与响应
  • Spring Boot 集成 RabbitMQ 并实现消息确认机制
  • 3月营销日历:开启春日盛宴,绽放生活魅力