1、封装上传文件的公共方法
//上传文件
uploadFiles(targetFormData, callback) {
let root = window.location.hostname === 'xxx.xxx.com'
// 正式环境api接口
?
`xxx1.xxx1.com/`
// 测试环境api接口
:
`xxx1.xxx1.net/`;
// 发送请求
var xhr = new XMLHttpRequest();
var timeTmp = 0;
var intervalObj = setInterval(function () {
timeTmp++;
if (timeTmp > 40) {
clearInterval(intervalObj);
console.log('传送已超时');
}
}, 1000);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
clearInterval(intervalObj);
// 上传成功,获取到结果 results
var res = JSON.parse(xhr.responseText);
if (res.success) {
callback(res.data);
} else {
console.log(res.msg);
}
}
};
//侦查当前附件上传情况
xhr.open("POST", root + 'attachment/upload');
xhr.send(targetFormData);
},
//判断是否是数组;
isArrayFn(value) {
if (typeof Array.isArray === "function") {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
},
2、页面使用
场景一:一次只能上传一张,有多个上传域
<template>
<van-uploader
v-model="xx"
:max-count="1"
upload-text="上传图片"
:after-read="afterRead"
:delete="beforeDelete"
:name="0"
/>
</template>
<script>
afterRead(file,e){
//console.log(file)
console.log(e)
var _this = this;
// 此时可以自行将文件上传至服务器
var targetFormData = new FormData();
var index = e.name;
var files = 'file'+index;
if (!_.isArrayFn(file)) {
file = [file];
}
//如果图片太大还在上传中用户点了上传请求会获取不到图片,加个loading确定上传成功后才能操作上传请求
Toast.loading({
message: '上传中...',
forbidClick: true,
loadingType: 'spinner'
});
const element = file[0];
targetFormData.append("filedata", file[0].file);
targetFormData.append("token", _.getToken());//获取token封装的一个方法
// 上传文件
_.uploadFiles(targetFormData, function(res) {
//console.log(res);
Toast.clear();
_this.$set(_this.file,files,res.fileUrl);
console.log(_this.file)
});
},
beforeDelete(file,e){
console.log('file',file)
console.log('e',e)
var _this = this;
var index = e.name;
var files = 'file'+index;
_this.$set(_this.file,files,'')
console.log(_this.file)
}
</script>
场景二:一次可以上传多张图片,有一个上传域
<template>
<van-uploader
v-model="xx"
multiple
:max-count="3"
:after-read="afterRead"
slot="label"
/>
</template>
<script>
afterRead(file){
var _this = this;
// 此时可以自行将文件上传至服务器
var targetFormData = new FormData();
if (!_.isArrayFn(file)) {
file = [file];
}
for (let i = 0; i < file.length; i++) {
const element = file[i];
targetFormData.append("filedata", file[i].file);
targetFormData.append("token", _.getToken());
// 上传文件
_.uploadFiles(targetFormData, function(res) {
console.log(res);
_this.refund_images.push(res.id);
});
}
},
</script>
这里的图片会是一个数组形式,提交的时候和其他表单数据一起提交即可,都有对应的key、value值,不需要再做处理