vue简单的上传文件
需求:点击按钮上传doc,docx,pdf 类型的文件直接上代码<Button @click="choicePDF" :disabled="PDFtrue" icon="ios-download-outline">上传文件</Button><inputref="filElemPDF"...
·
需求:
点击按钮上传doc,docx,pdf 类型的文件
直接上代码
<Button @click="choicePDF" :disabled="PDFtrue" icon="ios-download-outline">上传文件</Button>
<input
ref="filElemPDF"
type="file"
class="upload-file"
@change="getFilePDF"
style="display:none"
id="fileUploadPDF"
/>
// script
// 点击上传按钮
choicePDF() {
this.$refs.filElemPDF.dispatchEvent(new MouseEvent("click"));
},
// 选中文件后
getFilePDF(e) {
console.log(e);
let file = e.target.files;
console.log(file);
var arr = ["pdf", "doc", "docx"];
for (let i = 0; i < file.length; i++) {
//取出上传文件的扩展名
let flag = false;
var index = file[i].name.lastIndexOf(".");
var ext = file[i].name.substr(index + 1);
console.log(ext);
var name = file[i].name;
if (ext == "pdf" || ext == "doc" || ext == "docx") {
let formData = new FormData();
formData.append("files", file[i]); // 文件对象
let params = {
type: "doc"
};
api("/file/manageList", "post", formData, params).then(res => {
console.log(res);
if (res.data.code == 0) {
for (let index = 0; index < res.data.data.length; index++) {
let data = eval("(" + res.data.data[index] + ")");
console.log(data);
// 用来回显的业务需求
this.getUploadAfterPDF(data.fileId, name);
}
} else {
this.$Message.error(res.data.msg);
}
});
} else {
this.$Message.error("上传文件类型错误");
}
}
document.getElementById("fileUpload").value = null;
},
更多推荐
已为社区贡献8条内容
所有评论(0)