1.使用form表单的形式
第一种方式就是使用FormData的方式进行上传
html代码：
<el-form :model="upform" :rules="uprules" style="width:100%;" ref="upform" label-width="100px">
<el-form-item label="上传附件:">
<el-button type="primary"
@click="upLoad()"
size="mini"
class="form-btn"
>点击上传</el-button>
</el-form-item>
</el-form>JS代码：
// 请求-上传附件
upLoad() {
const _this = this;
// const fileType = [
// "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
// "application/vnd.ms-excel"
// ];
const fileType = ['xls','xlsx','et']
const inputFile = document.createElement("input")
inputFile.type = "file"
inputFile.style.display = "none"
document.body.appendChild(inputFile)
inputFile.click()
inputFile.addEventListener("change",function() {
const file = inputFile.files[0];
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
if (!fileType.includes(testmsg)) {
_this.$message.warning("上传的文件格式只能是,xls,xlsx,et");
document.body.removeChild(inputFile);
return false;
}
const formData = new FormData();
formData.append("file", file);
window.request({
url:'xxx/xxx',
data:formData,
success:(res)=> {
if (res.code === 200) {
_this.$message.success(res.message || "导入成功");
_this.getTableList();
}else {
_this.$message.success("导入失败");
},
finally:()=> {
document.body.removeChild(inputFile);
})
})
},2.使用element-ui的el-upload的方式进行上传文章来源：https://www.toymoban.com/news/detail-680601.html
这里我是根据需求封装了一个组件文章来源地址https://www.toymoban.com/news/detail-680601.html
<template>
<div id="uploadFile">
<el-form-item :label="uploadParams.label" :label-width="uploadParams.labelWidth" :id="uploadParams.key">
<el-upload
:data="paramsData"
:ref="uploadParams.key"
class="upload-demo"
:before-upload="beforeUploadFile"
:action="actionUrl"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-error="handleError"
:before-remove="beforeRemove"
:on-remove="handleRemove"
:disabled="uploadParams.disabled?uploadParams.disabled: false"
:limit="uploadParams.limit?uploadParams.limit:1"
:on-exceed="handleExceed"
:file-list="uploadParams.fileList">
<el-button size="small" :disabled="uploadParams.disabled?uploadParams.disabled: false" type="primary">点击上传</el-button>
<div v-if="uploadParams.showTip?uploadParams.showTip: false" slot="tip" class="el-upload__tip" style="word-break:break-all;"> {{`只能上传${uploadParams.type}文件，且不超过${uploadParams.fileSize}M`}} </div>
<div v-if="uploadParams.showTip2?uploadParams.showTip2: false" slot="tip" class="el-upload__tip" style="word-break:break-all;color:red"> {{`只能上传${uploadParams.limit}个${uploadParams.type}文件，再次上传需要删除之前的模板`}} </div>
</el-upload>
</el-form-item>
</div>
</template>
<script>
// ===============上传文件组件使用=================
// =========嵌套在el-form中调用组件： <el-from> <uploadFile :uploadParams="传递参数" @getFileIdReturn="接受上传文件id数组回传"></uploadFile> </el-form>
// ========= uploadParams中参数说明： label: form的label，labelWidth： form的label-width， key： 指定的组件标识,
// ================================ fileList: 存放文件数组，limit：存放限制上传数量,
// ================================ type: 附件类型(.xxx)，多种以英文逗号分隔， fileSize： 附件大小（M为单位）
// ================================ , showTip: 是否展示提示信息
//
import fileAPI from "@/api/fileApi";
import Config from "@/settings";
export default {
name: "uploadFile",
props: {
uploadParams: Object,
paramsData:Object
},
data() {
return {
fileIdList: [],//存放附件id数组
actionUrl: process.env.VUE_APP_BASE_API + "xxxx/xxxx",//文件上传地址
removeUrl: 'xxxx/xxx',// 删除文件地址
}
},
created() {},
methods: {
// 文件上传成功时的钩子
handleSuccess(res, file, fileList) {
this.$message.success("文件上传成功");
let filename = fileList.map(item => {
return item.name;
});
this.fileIdList.push(res.data.fid);
this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组
},
// 文件上传失败时的钩子
handleError() {
this.$message.error("文件上传失败");
},
handleExceed(files, fileList) {
//上传超过限制个数
this.$message.warning(`当前限制选择 ${this.uploadParams.limit} 个文件，本次选择了 ${ files.length } 个文件，
共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
if(file.url==undefined){
return;
}
// 移除前钩子
return this.$confirm(`确定移除 ${file.name}？`)
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUploadFile(file) {
console.log('before upload')
// console.log(file)
const extension = file.name.substr(file.name.lastIndexOf('.') + 1);
console.log('extension', extension)
const size = file.size / 1024 / 1024;
let temp = this.uploadParams.type.split(",");
let typeArr = [];
temp.forEach(element => {
typeArr.push(element.substr(element.lastIndexOf('.') + 1));
});
if (!(typeArr.includes(extension)) ) {
this.$message.warning(`只能上传后缀是${this.uploadParams.type}的文件`)
return false
}
if (size > this.uploadParams.fileSize) {
this.$message.warning(`文件大小不得超过${this.uploadParams.fileSize}M`)
return false
}
return extension && size
},
handleRemove(file, fileList) {
// 移除附件时钩子
console.log(file);
let id;
if(file.url) {
id = file.url.split("id=")[1];
}else if(file.response) {
id = file.response.data.fid;
}else {
this.uploadParams.fileList = fileList;
return
}
window.request({
url: this.removeUrl,
data: {
ids: id
},
success: (res) => {
if(res.code === 200) {
this.$message.success("删除成功！");
this.uploadParams.fileList = fileList;
this.fileIdList.forEach((element, index) =>{
if(element == id) {
this.fileIdList.splice(index, 1);
}
});
this.handLoadingShow(false)
this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组
}
}
})
},
handlePreview(file) {
//点击文件列表中已上传的文件时的钩子
console.log(file);
let fileurl;
if(file.url) {
fileurl = Config.downUrl + file.url;
}else {
fileurl = Config.downUrl + process.env.VUE_APP_BASE_API + "xxx/下载地址" + file.response.data.fid;
}
window.location.href = fileurl;
},
// 上传控件的回显====回显加载时使用
loadFileList (urlAndFid) {//参数url加文件
let templateList = null;
const downloadUrl = process.env.VUE_APP_BASE_API + xxx/xxx";
this.uploadParams.fileList = [];
this.fileIdList = [];
window.request({
url: urlAndFid,
success: ({ data }) => {
templateList = data;
templateList.forEach((element, index) => {
const obj = {};
obj.name = templateList[index].name;
obj.url = downloadUrl + templateList[index].id;
obj.id = templateList[index].id;
this.uploadParams.fileList.push(obj);
this.fileIdList.push(obj.id);
});
this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组
}
});
},
loadFileList2 (fileUrl, fileParam) {//url: fileUrl,参数fileParam
let templateList = null;
const downloadUrl = process.env.VUE_APP_BASE_API + "xxx/xxx";
this.uploadParams.fileList = [];
this.fileIdList = [];
window.request({
url: fileUrl,
data: fileParam,
success: ({ data }) => {
templateList = data;
templateList.forEach((element, index) => {
const obj = {};
obj.name = templateList[index].name;
obj.url = downloadUrl + templateList[index].id;
obj.id = templateList[index].id;
this.uploadParams.fileList.push(obj);
this.fileIdList.push(obj.id);
});
this.$emit("getFileIdReturn", this.fileIdList);//返回文件id数组
}
});
},
}
}
</script>到了这里，关于vue前端实现上传文件的两种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
