vue 针对多端口的情况下文件上传处理方法
在一个项目中，可能会存在多个端口号，因为不同的业务作为区分，需要多个端口号：
解决方案，
·1.在特定的端口号中api 接口中进行加入特定的字符
2.针对api的形式，使用formData来进行上传
3.增加针对formdata的数据进行上传方式
实例：
1.在request.js中添加针对文件上传的方式
if(config.url.indexOf("?extra_myself=test")!=-1){
let url = config.baseURL;
url = url.replace('48080/admin-api','48081/bus-api');
config.baseURL = url;
}
console.log(config)
里面的48080/admin-api 和48081/bus-api 就是不同的端口号和接口信息
2.
<template>
<div class="app-container">
<el-form
ref="form"
:model="form"
:rules="rules"
:label-position="labelPosition"
label-width="120px"
>
<el-form-item label="格式" prop="type">
<el-select
v-model="form.type"
size="small"
filterable
clearable
placeholder="请选择"
>
<el-option
v-for="item in format_options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="附件" prop="file">
<el-upload
ref="uploadFile"
accept=".xlsx, .xls"
:limit="1"
action="null"
:auto-upload="false"
:before-upload="beforeUploadFile"
:on-change="fileChange"
:on-remove="fileRemove"
:on-exceed="exceedFile"
:file-list="fileList"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip"></div>
<div class="el-upload__tip" style="color: red" slot="tip">
提示:仅允许导入“xls”或“xlsx”格式文件!
</div>
</el-upload>
</el-form-item>
<el-form-item style="text-align: center">
<el-button @click="submitFileForm">上传</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { gerExport } from "@/api/shippingWorkOrder/index";
import { getToken } from "@/utils/auth"; //获取token,
export default {
data() {
return {
labelPosition: "right", //表单对齐方式
format_options: [
{
id: "1",
name: "托书",
},
{
id: "2",
name: "样单",
},
],
form: {
type: null,
},
fileList: [],
// 导入参数
upload: {
// 是否显示弹出层（sku导入）
open: false,
// 弹出层标题（sku导入）
title: "",
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
},
};
},
computed: {
rules() {
return {
type: [{ required: true, message: "请选择类型", trigger: "change" }],
};
},
},
methods: {
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$notify.warning({
title: '警告',
message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
});
},
//文件移除
fileRemove() {
this.fileList = [];
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.files = file.raw;
this.fileList = fileList;
this.beforeUploadFile(file);
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
beforeUploadFile(file) {
let extension = file.name
.substring(file.name.lastIndexOf(".") + 1)
.toLowerCase();
let size = file.size / 1024 / 1024;
},
// 提交上传文件
submitFileForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (!this.files) {
this.$message.warning("请先上传文件!");
return;
}
let formData = new FormData();
let keys = Object.keys(this.form);
for (let i = 0; i < keys.length; i++) {
formData.append(keys[i], this.form[keys[i]]);
}
formData.append("file", this.files);
formData.append("extra_myself", "test");
gerExport(formData)
.then((response) => {
this.$message.success("上传成功!");
this.fileList = [];
this.form = {
type: null,
};
this.upload.open = false;
})
.catch((err) => {
this.$message.error("上传失败!");
});
}
});
},
},
};
</script>
api 接口
// 导入
export function gerExport(data){
return request({
url:'接口地址?extra_myself=test',
method: 'post',
dataType: 'file',
data:data
});
}
