vuewebupload怎么添加请求头部内容

vuewebupload怎么添加请求头部内容，最近接手了一个重构前端页面的项目, 后台只提供api接口, 需要使用前端的vue框架中的Upload进行上传文件, 并携带两个参数, 同时还需要在请求头中设置userId

查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到userId这事, 导致发送请求时总是报错500(internal server error)

在这里插入图片描述

接下来看一下如何使用Upload标签实现点击/拖拽上传

如何携带参数, 如何设置headers

<template>

<div>

<Row>

<Col>

<Upload

multiple

type="drag"

:data="submitData"

:headers="upHeaders"

action="/api/cs-dzjf-soa/api/v1/file/upload"

>

<div style="padding: 20px 0">

<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>

<p>点击或拖拽到此处上传</p>

</div>

</Upload>

</Col>

</Row>

</div>

</template>

<script>

import axios from "axios"

export default {

components: {},

name: "first",

data() {

return {

submitData: { // 这里是需要携带的数据

srcLanguage: "en",

tgtLanguage: "zh"

},

upHeaders: { // 这里设置的是请求头中的userId, 用于鉴权的

"userId": "fffffffffffffffffffffffffff"

}

}

},

}

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

效果图如下

在这里插入图片描述

Upload标签中配置的:data就是用于携带参数的, :headers是用于携带头信息的, 请求的url地址中开头位置的api是用于解决跨域的, 具体如何在前端解决跨域参考 前端解决跨域

**这里在headers中不需要配置Content-Type: multipart/form-data, 多此一举

后期补充的问题:

Upload中默认上传时的格式是

file: (binary)

1

1

这里现在使用的后台接口中, 用于接收上传文件的字段是是data, 那么这时候就需要在前台修改一下Upload默认的键名, 百度一番之后, 无果, 决定找一下源码看看, 源码也没找到有用的信息, 在一个github项目上找到了点信息

github地址

在这里插入图片描述

看到这句话 是不是觉得好像有点对症呢???没错, 就是这里可以设置

在这里插入图片描述

在这配置上name属性之后, 我们重新上传一下文件试试

现在已经成功的修改了

遇到一个需求：在网页抛出一切请求时，不管是资源请求还是重定向等，需要拦截掉并在header添加信息，ng拿到去做处理，访问不同资源服务器。

一开始想到的方式是：通过WKNavigationDelegate的代理方法- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler

来在请求之前获得请求信息，并把请求头信息添加进去，如下：

-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

    NSLog(@"灰度测试h5Url: %@",navigationAction.request.URL.absoluteString)

    if ([navigationAction.request.URL.absoluteString containsString:OUR_URL_ID]) {

        // 拦截所有网络请求头，重新添加参数请求头信息

        NSMutableURLRequest *mutableRequest = [navigationAction.request mutableCopy]

        NSDictionary *requestHeaders = navigationAction.request.allHTTPHeaderFields

        if ([requestHeaders isKindOfClass:[NSDictionary class]]) {

            //简单通过Version_Key判断下是否已经加入了请求信息

            if ([AFNetWorkManager KeyUrlrequestOneNull:requestHeaders]) {

                [AFNetWorkManager addWebDefaultKeyUrlrequest:mutableRequest]

                [webView loadRequest:mutableRequest]

                NSLog(@"灰度测试h5Url: %@ \n请求头：%@",navigationAction.request.URL.absoluteString,mutableRequest.allHTTPHeaderFields)

                decisionHandler(WKNavigationActionPolicyCancel)

                return

            }else{

                //参数正常，放开请求

                NSLog(@"灰度测试h5Url: %@ \n请求头：%@",navigationAction.request.URL.absoluteString,requestHeaders)

                decisionHandler(WKNavigationActionPolicyAllow)

            }

        }else{

            //没有请求头,加上新的请求头，并赋予参数

            mutableRequest.allHTTPHeaderFields = [NSMutableDictionary new]

            [AFNetWorkManager addWebDefaultKeyUrlrequest:mutableRequest]

            [webView loadRequest:mutableRequest]

            NSLog(@"灰度测试h5Url: %@ \n请求头：%@",navigationAction.request.URL.absoluteString,mutableRequest.allHTTPHeaderFields)

            decisionHandler(WKNavigationActionPolicyCancel)

        }

    }else{

        //本地请求资源，pdf等

        decisionHandler(WKNavigationActionPolicyAllow)

    }

}

但是经过打印发现，只拦截了一些html请求，向png、css、js资源请求，并没有拦截到，甚至没有走这个方法。

无奈，只能网上搜索，结果发现了：https://github.com/fenglee594/WKWebViewRequestHook

这个demo，稍加改动，亲测有效。

1、测试是否能够为请求设置指定的HTTP标头。

2、WebHeaderCollection.IsRestricted(stringheaderName，boolresponse)。

3、添加头字符串。

4、WebHeaderCollectionheaders=request.Headers，headers.Add("Accept-Language：en-us。q=0.5，en。q=0.3")。

---