element中手动图片上传，附带完整代码

先展示一张图片效果图片

这种上传时 很常见的。之所以写这篇文章的目的时记录一下，和之前完全不同的上传方式。

之前的上传方式：

由于<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>

上面即使完整的  ，注意看  那些方法，我是在做完了检测后才触发的  请求。

下面上传一个上传之前的 图片