vue利用elementUI上传文件以及其他参数的处理方式

博客介绍了在Vue中实现文件手动上传的方法,将文件自动上传属性设为false,即:auto-upload=\false\,在点击保存时调用el-upload的上传方法,并给出了封装的上传方法代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

将文件自动上传改为false 

    :auto-upload="false"

点击保存的时候,调用el-upload的上传方法

代码如下(封装的上传方法)

export function mpp(data) {
 return new Promise(function(resolve, reject) {
    let data = {
      method: "POST",
      url:url,
      data:data
    }
    resolve(axios(data));
  })
}
<template>
<!--导入计划 -->
<div class="associationPlan">
  <el-form :model="dataModel" :rules="rules" ref="associationPlan" label-width="100px">
        <el-form-item label="项目名称:" prop="projectArry">
            <el-cascader :options="listOrgInfoList" v-model="dataModel.projectArry" :props="defaultProp" size="small" placeholder="请选择项目" style="width:100%;" clearable :disabled="isCompany"></el-cascader>
        </el-form-item>
         <el-form-item label="计划级别:" prop="level">
            <el-select size="small" v-model="dataModel.level" placeholder="请选择:" clearable style="width:100%;">
                <el-option v-for="(item,index) in planTypeList" :label="item.name" :value="item.number" :key="index"></el-option>
            </el-select>
            <span class="warnInfo" v-if="dataModel.level==1">一级进度计划匹配项目总工期,项目下只可建立一个,请确认后再添加!</span>
        </el-form-item>
        <el-form-item label="计划名称:" prop="name">
            <el-input v-model.number="dataModel.name" size="small"></el-input>           
        </el-form-item>      
        <el-form-item label="导入计划:">
          <el-upload accept=".mpp" style="display:inline-block;vertical-align: top;" ref="uploadAdd" action="" :auto-upload="false" :http-request="uploadImg" :on-success="uploadImgSuccess" :on-remove="handleRemove">
            <el-button size="small" type="success">请选择文件</el-button>
          </el-upload> 
        </el-form-item>
               
  </el-form>
  <div class="clickBtn">
    <el-button @click="close"  size="small">取消</el-button>
    <el-button @click="commit" size="small" type="primary">保存</el-button>
  </div>
</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { plan,mpp} from "../api/system_interface.js";
export default {
  name: "associationPlan",
  data() {
    return {
      dataModel: {
        projectId: '',
        projectArry:[],
        level:null,
        name:'',
        parentId:'0'
      },
      defaultProp: {
        children: "child",
        label: "name",
        value: "id"
      },
      //数据校验
      rules: {
        projectArry:   [{ required: true, message:  "请选择项目", trigger: "blur" }],
        name:   [{ required: true, message:  "请输入计划名称", trigger: "blur" }],
        level:   [{ required: true, message:  "请选择计划级别", trigger: "change" }]
      
      },
      file:false,
      isCompany:false 
    };
  },
  computed: {
    ...mapState([
     'listOrgInfoList',
     'planTypeList'
    ]),
  },
  methods: {
     ...mapActions([
      'getlistOrgInfoList'
    ]),

    update(){
     let companyTypes = sessionStorage.getItem("companyType");
     this.isCompany = companyTypes == 4?true:false;
     this.dataModel.projectArry = JSON.parse(sessionStorage.getItem("selectArry"));
    },

    uploadImg (f) {
        //   if(!f){
        //    this.$message.error("请上传文件!");
        //    return
        // }
         this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
         let param = new FormData(); //创建form对象
         param.append('file',f.file);//通过append向form对象添加数据
         param.append('level',this.dataModel.level);//添加form表单中其他数据
         param.append('projectId',this.dataModel.projectId);//添加form表单中其他数据
         param.append('planName',this.dataModel.name);//添加form表单中其他数据
         mpp(param)//上传
         .then(response=>{
           if(response.code == "200"){
              this.$message.success("上传成功!");
              this.close();
              this.$emit("refreshData");    
              onSuccess(response.data);          
           }               
         })
         .catch(({err}) => {
           f.onError()
         })   
     },
     uploadImgSuccess(response, file, fileList) {
         // 缓存接口调用所需的文件路径
         console.log('文件上传成功')
        //  this.$message.success("上传成功!");
     },
     handleRemove(file, fileList) {
         // 更新缓存文件
         console.log('文件删除')
     },

    //重置方法
    reset() {
      const associationPlan = this.$refs["associationPlan"];
      associationPlan.resetFields();
      this.dataModel.projectId = null;
      this.dataModel.name = '';
      this.dataModel.level = '';
      this.dataModel.projectArry = [];
    },

    //关闭弹框
    close() {
      this.$emit("close");
      this.reset();
    },

    //点击提交
    commit() {
      this.$refs["associationPlan"].validate(valid => {
        if (!valid) {
          return;
        }
        this.$refs.uploadAdd.submit();
        // this.dataModel.projectId = this.dataModel.projectArry[this.dataModel.projectArry.length - 1];
        //  plan(this.dataModel)
        // .then(response => {
        //   if (response.code == "200") {
        //     this.$message.success("添加成功!");
        //     this.close();
        //     this.$emit("refreshData");
        //   } else {
        //     this.$message.error(response.msg);
        //   }
        // })
        // .catch(error => {
        // });
      });
    },

  }
};
</script>
<style lang="scss" scoped>
.clickBtn {
  text-align: center;
}
.warnInfo{
  // color: #feba51;
  color: rgb(64, 158, 255);
}
</style>

### 实现基于 VueElementUI 和 SpringBoot 的文件上传功能 要实现这一功能,可以按照以下方式构建前端和后端逻辑。 #### 前端部分 (Vue + ElementUI) 在前端,可以通过 `el-upload` 组件来完成文件上传的功能。以下是具体的代码示例: ```html <template> <div> <!-- 使用 el-upload 组件 --> <el-upload class="upload-demo" action="http://localhost:8080/upload" <!-- 设置后端接收接口地址 --> :on-success="handleSuccess" :before-upload="beforeUpload"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> <script> export default { methods: { beforeUpload(file) { const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPGorPNG) { this.$message.error('仅支持上传 JPG 或 PNG 文件'); } if (!isLt500K) { this.$message.error('文件大小不得超过 500KB'); } return isJPGorPNG && isLt500K; }, handleSuccess(response, file, fileList) { this.$message.success(`文件 ${file.name} 已成功上传`); } } }; </script> ``` 上述代码实现了基本的文件上传界面以及验证逻辑[^3]。其中: - **action 属性**指定了文件上传的目标 URL。 - **before-upload 方法**用于在文件上传前执行校验操作。 - **on-success 方法**会在文件上传成功后触发回调函数。 --- #### 后端部分 (SpringBoot) 在后端,需要创建一个控制器方法来处理文件上传请求。以下是具体实现: ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/upload") public class FileController { @PostMapping public String uploadFile(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return "失败:未检测到任何文件"; } try { // 获取原始文件名 String fileName = file.getOriginalFilename(); // 将文件保存至服务器指定目录(此处仅为演示) byte[] bytes = file.getBytes(); Path path = Paths.get("uploads/" + fileName); Files.write(path, bytes); return "成功:" + fileName + "已上传"; } catch (Exception e) { e.printStackTrace(); return "失败:文件上传过程中发生错误"; } } } ``` 此代码片段展示了如何通过 SpringBoot 接收并存储上传文件。主要步骤如下: - 定义了一个 `/upload` 路径作为文件上传目标。 - 利用了 `MultipartFile` 类型参数获取客户端发送过来的文件对象。 - 对接收到的文件进行了简单的非空判断,并将其保存到了本地磁盘中的特定位置。 --- #### 配置跨域访问 如果前后端部署在同一台机器的不同端口下,则可能遇到 CORS (Cross-Origin Resource Sharing)问题。可以在 SpringBoot 中全局配置允许跨域请求: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600) .allowCredentials(true); } } ``` 这样就可以解决因跨域引发的问题[^1]。 --- ### 总结 以上就是利用 VueElementUI 和 SpringBoot 构建文件上传功能的整体流程。需要注意的是,在实际开发环境中还需要考虑安全性因素,比如对文件类型的进一步过滤、防止恶意脚本注入等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值