先展示一张图片效果图片
这种上传时 很常见的。之所以写这篇文章的目的时记录一下，和之前完全不同的上传方式。
之前的上传方式：
由于<el-upload></el-upload>这个组件有自动上传，也就是说只要图片提交后就会自动上传。
所以之前都是 为这样的 表单提交提供两个接口，第一个接口提供图片接收，并返回接收后的图片路径。然后在和表单一起提交的第二个接口中。
缺点：需要提供两个接口。
优点：后台只需要写一中文件解析的接口就可以。毕竟 第一个接口是 接收文件 返回地址。所以用第一个接口处理不同文件
好像，现在来说一下，如何将数据和图片一起提交给一个接口
向上一张图片解释一下关键点
一个点一个点的解释一下
第一个点，这是一个钩子函数，这个第四个点有关系，目的是做到控制什么时候去上传到服务器
第二个点，每个上传的文件字段值，这个和你提交的数据文件字段有关系
第三个点，这里是设置请求头和请求体除文件以外的数据。
第四个点，这里是设置自动上传还是手动上传，默认是自动上传
第五个点，这里是一个监测文件变化的函数 目的是 什么时候区展示上传图片
第六个点，这里就是你上传的接口
知道这些以后就可以写一个 手动上传，一个接口的 上传了
由于是手动上传 所有需要在change时做上传检查，还有由于我本次上传只上传一张图片，所以在上传的fileList的长度达到2张图片后就需要使用splice(-1,1)删除，splice会删除原数组。
下面是完整的代码
<template> <div class="newTask"> <el-container> <el-header class="indexTop"> <div class="workNameArea" @click="returnRouter"> <i class="el-icon-arrow-left"></i> <span>新建任务</span> </div> </el-header> <el-main> <div class="box"> <div class="boxMin" v-loading="updateLoading" element-loading-text="拼命上传中" element-loading-spinner="el-icon-loading"> <div class="updateImg"> <div class="updateBox"> <el-upload class="upload-demo" drag ref="upload" :show-file-list="false" name="uploadFile" :headers="myHeader" :data="updateOtherData" :auto-upload="false" :on-success="handleAvatarSuccess" :on-progress="uploadVideoProcess" :on-change="changeUpload" action="/api/customer/resource/createTemplate" multiple> <i v-if="imageUrl===''" class="el-icon-upload"></i> <div v-if="imageUrl===''" class="el-upload__text"><em>点击上传</em></div> <el-image v-if="imageUrl!==''" :src="imageUrl" class="actives" ></el-image> </el-upload> </div> </div> <el-form label-position="top" :model="formLabelAlign" :rules="rules" ref="formLabelAlign" label-width="80px" > <el-form-item label="主题" prop="theme"> <el-input v-model="formLabelAlign.name" placeholder="输入内容" ></el-input> </el-form-item> <el-form-item label="地址" prop="address"> <el-input v-model="formLabelAlign.location" placeholder="输入内容"></el-input> </el-form-item> <el-form-item label="详细描述" prop="describe" > <el-input v-model="formLabelAlign.description" placeholder="输入内容"></el-input> </el-form-item> </el-form> <el-button type="primary" class="newButtons" @click="newToDragTask('formLabelAlign')">下一步</el-button> </div> </div> </el-main> </el-container> </div> </template> <script> import Cookies from 'js-cookie'; export default { name: 'newTask', data(){ return { updateLoading:false,//显示上传加载 myHeader:{},//请求头 updateOtherData:{},//其他请求数据 imageUrl:'',//图片路径 formLabelAlign: { name: '', location: '', description: '' }, rules: { name: [ { required: true, message: '请输入主题', trigger: 'blur' }, ], location: [ { required: true, message: '请输入地址', trigger: 'blur' } ], description: [ { required: true, message: '请输入详细描述', trigger: 'blur' } ] } } }, methods:{ returnRouter(){ this.$router.push({path: '/index'}) }, newToDragTask(formLabelAlign){ this.$refs[formLabelAlign].validate((valid) => { if (valid) { //上传之前 this.myHeader.customerToken =Cookies.get('buildToken');//设置请求头部信息 //设置其他请求参数 this.updateOtherData.name=this.formLabelAlign.name; this.updateOtherData.location=this.formLabelAlign.location; this.updateOtherData.description=this.formLabelAlign.description; //触发上传 this.$refs.upload.submit(); } else { console.log('error submit!!'); return false; } }); }, handleAvatarSuccess(res, file) {//图片上传成功 if(res.code==1){ this.updateLoading = false;//关闭上传加载 let name = this.formLabelAlign.name; let ids = res.data.id; this.$router.push({name: 'taskCenter', params: {id: ids, name: name}}) }else{ this.$message({ type: 'error', message: '上传失败' }) } }, uploadVideoProcess(event, file, fileList){ //弹出上传加载 this.updateLoading = true; }, //文件改变时 changeUpload(file,fileList){ //每次改变时，做检测 let regs=/.+?(\.jpg|\.png|\.jpeg)/g; let isImg = regs.test(file.name); let isLt3k = file.size / 1024 < 300; if (!isImg) { this.$message.error('请上传正确的图片格式'); } if(!isLt3k){ this.$message.error("请上传图片不能超过 300KB!") } if(fileList.length>1){//始终保证只有一张 fileList.splice(-1,1); } if(isImg && isLt3k){ //预览图片 this.imageUrl = URL.createObjectURL(file.raw); } } } } </script> <style scoped> .box{ width: 50%; margin: 60px auto 0; border: 1px solid #ddd; -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888; } .boxMin{ width: 75%; margin: 60px auto 0; } .upload-demo{ } .newButtons{ width: 50%; margin-left: 25%; margin-top: 66px; margin-bottom: 50px; } .updateImg{ width: 100%; position: relative; } .updateBox{ margin-top: 40px!important; width: 360px; margin: 0 auto; } .actives{ width: 100%; } </style>上面即使完整的 ，注意看 那些方法，我是在做完了检测后才触发的 请求。
下面上传一个上传之前的 图片
