Content-Type: 'application/x-www-form-urlencoded'
- uni.request({
- url:URL.TASK_SYNC_VM, //仅为示例,并非真实接口地址。
- data:formData,
- method:"POST",
- header: {
- Authorization,
- 'Content-Type': 'application/x-www-form-urlencoded'
- }
- }),
Content-Type的值 | form表单 | Ajax(xhr) |
multipart/form-data | 可以通过enctype属性设置 | 发送的数据形式为FormData时的默认值 |
application/x-www-form-urlencoded | 默认。即未设置enctype属性时的默认值 | 可以通过setRequestHeader方法设置 |
application/json | 不支持。可以通过enctype属性设置,但提交时会自动转为application/x-www-form-urlencoded | 可以通过setRequestHeader方法设置 |
text/plain | 可以通过enctype属性设置 | 发送的数据形式为字符串时的默认值。包括JSON.Stringify方法返回的json字符串 |
Content-Type
- let formData = new Formdata()
- Object.keys(data).forEach((index) => {
- formData.append(index, data[index])
- })
- console.log(formData.get('userId'));
-
-
- uni.request({
- url:URL.TASK_SYNC_VM, //仅为示例,并非真实接口地址。
- data:formData, //uni.request 不支持formData类型的数据
- method:"POST",
- header: {
- Authorization,
- 'Content-Type': 'multipart/form-data'
- }
- )}
ps:uni.request 不支持formData类型的数据
uni.app提供了支持formData类型的数据,但是是传文件的明显不符合我们的需求。
- uni.uploadFile({
- url,
- file, // 文件
- name, // 在FormData 中文件对应的属性名
- formData: data, // 除文件外其他所有数据,传对象,会默认转换为 FormData
- header: {
- token
- // 不需要手动指定 multipart/form-data ,本 API 默认 multipart/form-data
- // 手动指定需要计算 boundary 并拼接上
- },
- success: res => {
-
- },
- })
然后找能支持发送formData类型数据的库 fly.js
目前Fly.js支持的平台包括:Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器,这些平台的 JavaScript 运行时都是不同的
安装fly:
npm install flyio
- let data = {
- 'userId': 'a85e5678-419d-4e8f-8da0-c961b4186333',
- 'package': 'io.changchun.app',
- 'taskId': 1,
- 'taskName': 'test2',
- // "injectObject":'{"url":"/pages/myMission/myMission"}'
- }
- let formData = new Formdata()
- Object.keys(data).forEach((index) => {
- formData.append(index, data[index])
- })
-
- fly.post(URL.TASK_SYNC_VM,{...formData},{headers:{
- Authorization,
- "content-type":"multipart/form-data"
- }})
运行项目到浏览器 我们看到能正常发送formData类型请求
我们接下来我们运行到真机上会遇到以下提示:FormData is not defined
用为App的js运行在jscore下而不是浏览器里,没有浏览器专用的js对象,比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。
FormData也是浏览器定制的对象,uniapp非H5端不支持
renderjs 主要服务于APP,因为uni-app为vue+js+html进行编写,整个是h5的技术栈。而app上并没有document等基础对象。那么,涉及到这些的前端类库就无法使用,例如html2、canvas、canvas2、image。而要用这些怎么办,这是用就出现了renderjs这种视图层工具来进行渲染。
运行在视图层的js
大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力(减少通讯损耗提升性能,例如一些手势或canvas动画的场景)
在视图层操作dom,运行for web的js库(可以操作dom,意味着拥有window、document等这些全局变量,在app-vue的service层没有这些)
详细语法使用可以参考以下文章:uniapp中使用renderjs_流氓也是种气质 _Cookie的博客-CSDN博客
class="nav_title" @click="custom.taskSycn">test - // 注意renderjs方法的调用custom.taskSycn() 不能加(),在H5能正常解析,但是在APP端无法正常解析
-
- <script module="custom" lang="renderjs"> // 定义renderjs 即视图层,这里面的语法及生命周期都和vue语法保持一致
- import axios from 'axios'
- export default {
- data() {
- return {}
- },
- methods: {
- handleClick() {
- console.log('9999');
- },
- taskSycn() {
- console.log('taskSycn++++');
- let Authorization = `9j8yMV b964c9635dcf5e0f9c50a6073bdb69d7`
- let data = {
- userId: "a85e5678-419d-4e8f-8da0-c961b4186333",
- package: "io.changchun.app",
- taskId: 1,
- taskName: "test21"
- // "injectObject":'{"url":"/pages/myMission/myMission"}'
- };
- axios
- .post("http://116.141.0.158:8083/mobile-portal/task/sync.vm", {
- ...data
- }, {
- headers: {
- Authorization,
- "Content-type": "multipart/form-data"
- }
- })
- .then(function (response) {
- console.log(response);
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- }
- }
- script>
-
- <script> // 就是我们正常的uniapp js代码 即service层
- export default {
- data() {
- return {}
- },
- }
- script>