查找了很多资料, 使用原生的上传也是可以的 , 只是之前没有注意到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属性之后, 我们重新上传一下文件试试
现在已经成功的修改了
具体如下 ：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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
uploader = WebUploader.create({
auto: false,
// swf文件路径
swf: '/Scripts/webUploader/Uploader.swf',
// 文件接收服务端。
server: '@Url.Action("Upload", "Home")',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#myPicker',
// formData: { "name": name, "desc": desc},
prepareNextFile:true,
chunked: true, // 分片上传大文件
chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？
thread: 100,// 最大上传并发数
method: 'POST',
fileSizeLimit: 1024,
// 只允许选择图片文件。
accept: {
title: 'HTML5组态文件',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'img/*'
}
})
5
6
7
8
9
10
11
12
13
//当文件被加入队列之前触发
uploader.on('beforeFileQueued', function (file) {
//如果是单文件上传，把旧的文件地址传过去
if (!p.multiple) {
if (p.sendurl.indexOf("action=itemcode") >0) {
if ($("#txtItemCode").val() == '') {
layer.msg('请先填写商品编码再上传图片！')
//layer.alert('请先填写商品编码再上传图片！')
return false
}
data.formData= { "name": name, "desc": desc}
}
}
})
uploader.on('fileQueued', function (file) {
$("#listFile").append('<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>')
})
uploader.on('uploadProgress', function (file, percentage) {
var li = $('#' + file.id),
percent = li.find('.progress .progress-bar')
// 避免重复创建
if (!percent.length) {
percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo(li).find('.progress-bar')
}
li.find('p.state').text('上传中')
percent.css('width', percentage * 100 + '%')
})
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传')
})
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错')
})
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').fadeOut()
//$("#editModal").fadeOut(2000, window.location.reload())
//destory()
//$("#editModal").destory()
})
//当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
uploader.on('uploadBeforeSend', function (obj, data, headers) {
// data.DelFilePath = parentObj.siblings(".upload-path").val()
// data.ItemCode = $("#txtItemCode").val()
data.formData= { "name": name, "desc": desc}
})
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading'
} else if (type === 'stopUpload') {
state = 'paused'
} else if (type === 'uploadFinished') {
state = 'done'
}
if (state === 'uploading') {
$('#btnBeginUpload').text('暂停上传')
} else {
$('#btnBeginUpload').text('开始上传')
}
})
} else {
geap.alertPostMsgDefault("请选择一个文件!", "info")
}
})
// 点击上传事件
$('#btnSave').bind('click', function () {
var name = $("#txtName").val()
var id = $("#txtId").val()
if (!name || name.length == 0) {
alert("请填写名称")
return false
}
var obj = new Object()
obj.name = name
obj.id = id
uploader.options.formData = obj
// uploader.options.formData = { "name": name, "id": id, }
if (state === 'uploading') {
uploader.stop()
} else {
uploader.upload()
}
})
你要理解fileNumLimit的含义。fileNumLimit=总文件数-已经上传的文件数。这就意味着你fileNumLimit设置为5的话，一次上传6张是不行的，但是每次上传1张，就能突破5张的限制。原因是插件在上传完一个文件后，会把计数清零。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）