vue 针对多端口的情况下文件上传处理方法

标签：文件 vue 端口 fileList api let file 上传

在一个项目中，可能会存在多个端口号，因为不同的业务作为区分，需要多个端口号：

解决方案，

　　·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   });
 }  

 　　　　

 

标签：文件,vue,端口,fileList,api,let,file,上传
From： https://www.cnblogs.com/rockyjs/p/16598140.html