上传文件（不通过组件自动上传，并且使用post方式上传）

由于一些需求 无法使用el-upload组件直接进行上传，所以使用以下方法进行接口方式提交

api文件

// 上传文件
export function uploadFile(url,data) {
return request({
url: url,
method: 'post',
data: data
})
}


vue文件

ref="upload"
:limit="10" //最多上传十个文件
action="#" // 必选参数，上传的地址
:multiple="true" // 是否支持多选文件
:show-file-list="true" // 是否显示已上传文件列表
:on-change="handleUploadChange" // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
:on-progress="handleFileUploadProgress" //文件上传时的钩子
:on-success="handleFileSuccess" //文件上传成功时的钩子
:auto-upload="false" //是否在选取文件后立即进行上传(此处重点 想要不自动上传需要选择false)
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:data="uploadData" //上传时附带的额外参数
:file-list="fileList" // 上传的文件列表集合
drag //显示边框 是否启用拖拽上传
>



// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
beforeRemove(file, fileList) {
// console.log("删除文件前file", file);
// console.log("删除文件前fileList", fileList);
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code == 200) {
this.$message({
message: "上传成功",
type: "success",
});
} else {
this.$message({
message: "上传失败",
type: "warning",
});
}
// this.upload.open = false;
// this.upload.isUploading = false;
// this.$refs.upload.clearFiles();
// this.$alert("

下载文件

api

// 下载文件
export function download_file(data) {
return request({
url: '/common/download/resource?resource=' + data.resource,
method: 'get',
responseType:'blob'
})
}


js部分

// 下载文件
downloadFile(row) {
let data = {
resource: row.filePath,
};
download_file(data).then((res) => {
let fileName = row.name;
const link = document.createElement("a");
link.download = fileName;
link.href = URL.createObjectURL(res);
link.target = "_blank";
link.style.display = "none";
document.body.appendChild(link);
link.click();
// URL.romoveObjectURL(fileUrl)
document.body.removeChild(link);
});
},