学生请假学习八

图片上传前端处理

图片先由前端传给后端，然后再给前端返回一个图片的绝对地址，在由前端把这个地址存入数据库中。

 请假列表中的附件栏中需要判断 有没有图片地址   有就进行切割没有就不切割 不让会报错

1:选择图片上传的组件upload   在里面设置上传的地址和成功的回调
<el-form-item>
          <el-upload
            class="upload-demo"
            action="/api/uploads"  //上传的地址
            name="filename"  //上传的文件名
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="success" //成功回调
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
2:设置回调方法
 success(res, file, fileList){
      console.log(res.url)
    },
3:验证判断是否有附件  在data中加字段  表示选择的图片       和 上传成功的图片 的集合
    return {
      fileList:[],
      selectedList:[],//选择的图片
      uploadList:[],//上传成功的图片
   4:修改上传组件   改成手动上传 和 添加change事件
  <el-upload
            class="upload-demo"
            action="/api/uploads"
            name="filename"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :on-exceed="handleExceed"
            :file-list="fileList"
            :auto-upload="false"   //取消自动上传
            ref="upload"  //给组件取名字
            :on-success="success"//成功的回调
            :on-change="change"//改变事件

          >
  5:声明change事件
   change(file,fileList){//每次改变触发
      //console.log(fileList);
      this.selectedList = fileList;
    },

6:在提交事件中判断  是否需要上传图片
 if(this.selectedList.length){//判断条件
              this.$refs.upload.submit();//开始图片上传
          }else{
            //没有附件
            leaveinfo.add({ leavereason, start, end }).then(result => {
              let code = result.data.code;
7:修改图片上传成功的回调方法
 success(res, file, fileList){//图片上传的回调
      // console.log("返回结果:"+res.url)
      this.uploadList.push(res.url);//["http://localhost:3000/uploads/1.jpg","http://localhost:3000/uploads/2.jpg"]
      //图片全部上传完成
      if(this.uploadList.length == this.selectedList.length){
        //就可以做数据新增
          let leavereason = this.ruleForm.leavereason;
          let start = this.ruleForm.start;
          let end = this.ruleForm.end;
          let extend = this.uploadList.join("_");
         leaveinfo.add({ leavereason, start, end,extend}).then(result => {
              let code = result.data.code;
              if (code == 1) {
                this.addTableDate({
                  username: window.localStorage.getItem("username"),
                  leavereason,
                  start,
                  end,
                  type: 1,
                  extend
                });
              } else if (code == 2) {
                this.$message.error("权限不够");
              } else {
                this.$message.error(result.data.msg);
              }
            });
            this.$refs["ruleForm"].resetFields();
            this.dialogFormVisible = false;
          }

      }
    },

 图片上传组件

 <el-form-item label="附件" prop="extend">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="/api/uploads"
            name="filename"
            multiple
            :file-list="fileList"
            :on-success="success"
            :on-change="change"
            :auto-upload="false"
            :on-remove="removefile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

组件对应的数据数据

export default {
  data() {
    return {
      fileList: [],
      selectedList: [], //选择的图片
      uploadList: [], //上传成功的图片
      dialogVisible: false,
      ruleForm: {
        reason: "",
        start: "",
        end: "",
        extend: ""
      },

      rules: {
        reason: [
          { required: true, message: "请假理由不能为空", trigger: "blur" }
        ],
        start: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
        end: [{ required: true, message: "结束时间不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        //表单验证成功 才进行数据请求  去连接接口
        if (valid) {
          let start = new Date(this.ruleForm.start);
          let end = new Date(this.ruleForm.end);
          if (end > start) {
            if (this.selectedList.length) {
              //判断条件
              this.$refs.upload.submit(); //开始图片上传
            } else {
              console.log("时间没有问题");
              let { data } = await leaveModel.add({
                start,
                end,
                reason: this.ruleForm.reason
              });
              if (data.code == 1) {
                this.$emit("additem", data.data[0]);
                this.resetForm();
              } else {
                alert(data.msg);
              }
              console.log(data);
            }
          } else {
            alert("结束时间要比开始时间大");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.dialogVisible = false;
      this.$refs.ruleForm.resetFields();
    },
    removefile(file, fileList) {
      this.selectList = fileList;
    },
    change(file, fileList) {
      //每次改变触发
      //console.log(fileList);
      this.selectedList = fileList;
    },

    async success(res, file, fileList) {
      //图片上传的回调
      // console.log("返回结果:"+res.url)
      this.uploadList.push(res.url); //["http://localhost:3000/uploads/1.jpg","http://localhost:3000/uploads/2.jpg"]
      //图片全部上传完成
      if (this.uploadList.length == this.selectedList.length) {
        //就可以做数据新增
        let { data } = await leaveModel.add({
          reason: this.ruleForm.reason,
          start: this.ruleForm.start,
          end: this.ruleForm.end,
          extend: this.uploadList.join("|")
        });
        if (data.code == 1) {
          this.$emit("additem", data.data[0]);
          this.resetForm();
        } else {
          alert(data.msg);
        }
      }
    }
  }
};