使用element-ui的Upload 上传文件

使用Upload 进行文件上传

https://element.eleme.cn/#/zh-CN/component/upload

注：当文件和一些其他数据（姓名，年龄）进行一起上传时候可分为两种过程
第一种：单独的文件上传地址，上传完文件后，后端返回该文件的地址，前端将该地址同其他数据（姓名，年龄）再次上传。
第二种：文件和数据（姓名，年龄）同一个接口进行上。
本文采用的是第二种 使用 var formData = new FormData(); 进行 同时上传。
下面展示一些

内联代码片

。

<template><div><el-dialog title="文件上传":visible.sync="dialogFormVisible":before-close="handleClose"><el-form :model="ruleForm":rules="rules" ref="ruleForm"><el-form-item label="文件":label-width="formLabelWidth" prop="paramsFile"><el-upload
            ref="upload"class="upload-demo"
            action="customize"//不设置上传地址，下方自定义上传:limit="1"//只能上传一个文件:file-list="fileList"// 已上传的文件列表 前端页面可看到的:http-request="uploadFile"// 覆盖默认的上传行为，可以自定义上传的实现:on-exceed="handleExceed"//超出上传文件个数的钩子 可给与提示:on-remove="handleRemove"// 移除文件列表的钩子(点击右边的x):before-upload="handleUpload">//上传文件之前的钩子（这里用来限制上传的文件类型）<el-button size="small" type="primary">点击上传</el-button></el-upload></el-form-item><el-form-item label="版本名称" prop="versionName":label-width="formLabelWidth"><el-input v-model="ruleForm.versionName" placeholder="输入版本名称"></el-input></el-form-item><el-form-item label="版本号" prop="versionCode":label-width="formLabelWidth"><el-input v-model="ruleForm.versionCode" placeholder="输入版本号"></el-input></el-form-item></el-form><div slot="footer"class="dialog-footer"><el-button @click="resetForm('ruleForm')">取 消</el-button><el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button
        ></div></el-dialog></div></template><script>exportdefault{data(){return{// 添加数据ruleForm:{versionName:"",// 版本名称versionCode:"",//版本号paramsFile:"",//上传的文件},formData:"",// 初始化的上传fileList:[],//上传文件的列表dialogFormVisible:false,//添加的弹框}},methods:{// 添加确定事件submitForm(formName){var formData =newFormData();this.$refs[formName].validate(async(valid)=>{if(valid){
          formData.append("file",this.ruleForm.paramsFile);//文件
          formData.append("versionName",this.ruleForm.versionName);//版本名称
          formData.append("versionCode",this.ruleForm.versionCode);//版本号let loading =this.$loading({lock:true,text:`提交中，请稍等`,// text:`提交中，请稍等${this.progressPercent}`,background:"rgba(0,0,0,0.5)",});try{let res =awaituploadApp(formData);if(res.code ==200){
              loading.close();this.dialogFormVisible =false;this.progressPercent =100;this.$message({type:"success",message:"添加成功",});this.init();this.ruleForm.paramsFile ="";this.ruleForm.versionName ="";//版本名称this.ruleForm.versionCode ="";//版本号this.fileList =[];}}catch{
            console.log("error");
            loading.close();this.$message.warning(`新增失败`);}}else{
          console.log("error sumbit");// return false}});},// 自定义上传事件uploadFile(params){
      console.log(params.file,"上传的文件");this.ruleForm.paramsFile = params.file;},// 超出上传文件个数的钩子handleExceed(file, fileList){this.$message.warning(`只能上传一个文件`);},// 移除handleRemove(file, fileList){
      console.log(file,"移除的文件");//  清空 上传的文件数据this.ruleForm.paramsFile ="";this.fileList =[];},// 上传文件之前的钩子（这里用来限制上传的文件类型）handleUpload(){},}}</script>

图例：
:on-remove=“handleRemove” // 移除文件列表的钩子(点击右边的x)
:on-exceed=“handleExceed” //超出上传文件个数的钩子 可给与提示
:file-list=“fileList” // 已上传的文件列表 前端页面可看到的