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
| <template>
<view>
<view class="demo" @click="inputClick()">点我上传</view>
<view ref="input" class="inputFile"></view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
this.fileInit('input', 'yt_file', this.newUpLoad1)
},
methods: {
/*
url 服务器上传路径如（https://gl.tyj.zj.gov.cn/api-file/foreign/files-anon）;
fileObj 自己页面定义的input file，（例如 ： var fileObj = document.getElementById("file").files[0]）；
paramArry 参数 （无传null, 有的话传入数组对象，例如： [{name:1,id:1}]这种形式）；
func 成功返回；
onprogress 当前进度条状态回调；
error 失败回调
*/
//xhr原生上传文件
xhrUpladFile(url, fileObj, paramArry, func, onprogress, error) {
var form = new FormData();
form.append("file", fileObj);
if (paramArry != null) {
paramArry.forEach((item) => {
form.append(item.name, item.value)
})
}
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
xhr.withCredentials = true;
xhr.upload.onprogress = function(e) { //上传开始执行方法
// console.log("已上传===" + JSON.stringify(e.loaded));
// console.log("总大小===" + JSON.stringify(e.total));
onprogress(e.loaded, e.total);
}
xhr.onreadystatechange = function() {
switch (xhr.readyState) {
case 0:
console.log("请求未初始化");
break;
case 1:
console.log("请求启动，尚未发送");
break;
case 2:
console.log("请求发送，尚未得到响应");
break;
case 3:
console.log("请求开始响应，收到部分数据");
break;
case 4:
if (xhr.status == 200) {
uni.hideLoading()
var data = JSON.parse(xhr.responseText);
// console.log(JSON.stringify(data));
func(data);
}
break;
}
}
xhr.onerror = function(err) { //请求失败
console.log("上传失败！");
error(err);
};
xhr.send(form); //开始上传，发送form数据
},
//文件上传初始化
fileInit(refId, inputId, func) {
var input = document.createElement('input')
input.type = 'file'
input.id = inputId
input.onchange = (event) => {
this.xhrUpladFile('https://gl.tyj.zj.gov.cn/api-file/foreign/files-anon', event.target.files[0],
null,
func, this.status)
}
this.$refs[refId].$el.appendChild(input)
},
newUpLoad1(data) {
//data为上传文件接口返回的响应数据 这里可以对其进行一些了骚操作
},
status() {
uni.showLoading({
title: '上传中',
mask:true
})
},
inputClick() {//通过其他容器来触发input原生的点击事件发起上传，原生input上传则被隐藏(改它的样式太难了，巨丑无比)
document.querySelector('#yt_file').click()
},
}
}
</script>
<style>
.demo{
width: 100rpx;
height: 100rpx;
background:
}
.inputFile{
position: absolute;
opacity: 0;
top: -99999px;
}
</style>
|
