最近,一直在做一些关于文件上传,以及凭证导出打印的工作,做一些记录,方便日后的查阅。
对了,我在这里用的是antDesign
这个第三方组件
文件上传
-
vue
模板中
<p>
<a @click="uploadElect(item, item.key)">上传电子凭证</a>
</p>
<-->调用第三方相关的上传组件</-->
<a-upload
:fileList="fileListElect" // 上传的文件的集合
:remove="handleRemoveElect" // 上传文件的删除
:before-upload="beforeUploadElect"
@change="handleChangeElect" // change点击事件
>
<a-button> <a-icon type="upload" /> 上传 </a-button>
</a-upload>
-
点击按钮后发送请求,同时对获取到的一些数据做了一些处理
handleChangeElect(info) {
let fileList = [...info.fileList];
fileList = fileList.slice(-1);
this.fileListElect = fileList;
this.queryUploadElect.file = this.fileListElect[0];
},
handleRemoveElect(file) {
const index = this.fileListElect.indexOf(file);
const newFileList = this.fileListElect.slice();
newFileList.splice(index, 1);
this.fileListElect = newFileList;
},
uploadElect() {
const formData = new FormData();
formData.append("file",this.queryUploadElect.file.originFileObj);
formData.append("id", this.queryUploadElect.id);
uploadCertificate(formData, this.queryUploadElect.status)
.then((res) => {
console.log(res);
if (res.code == 200) {
this.$message.success(res.message);
const target = this.dataSource.find(
(item) => item.key === this.indexElectKey
);
this.imgElectObj = res.data;
if (target) {
const img = res.data.split(/;/)[0];
this.imgElect.push(img);
target.arrElect = this.imgElect;
let name = [];
for (var i = 0; i < target.arrElect.length; i++) {
let idx = target.arrElect[i].toString().lastIndexOf("/");
let str = target.arrElect[i] .toString()
.substring(idx + 1, target.arrElect[i].toString().length);
name.push(str);
}
target.fileNames = name.join(";");
target.filePath = target.arrElect.join(";");
this.$store.commit("warrantyElect", img);
}
} else {
this.$message.warning(res.message);
}
})
);
描述可能并不详尽,关于文件上传后的后续操作,还是要根据各位同学的项目需求以及后端返回文档做一些处理,对于取值方面可能会不同,但是在传输参数方面,还是要同后端同学进行协调,处理。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)