vue 集成Element-ui、Vant 实现表单提交、单文件上传

效果图

 

vue代码

<template>
  <div class="feedback-wrap">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <div class="feedback-title">
        <span>(必选)请选择您想反馈的问题点</span>
      </div>

      <div class="feedback-radio" >
        <el-form-item prop="radio">
          <el-radio v-model="ruleForm.radio" label="1">备选项</el-radio>
          <el-radio v-model="ruleForm.radio" label="2">备选项</el-radio>
          <el-radio v-model="ruleForm.radio" label="3">备选项</el-radio>
          <el-radio v-model="ruleForm.radio" label="4">备选项</el-radio>
          <el-radio v-model="ruleForm.radio" label="5">备选项</el-radio>
        </el-form-item>
      </div>
      <div class="feedback-title">
        <span>请补充详细问题很意见</span>
      </div>
      <div class="feedback-detail">
        <el-form-item prop="desc">
          <el-input type="textarea" placeholder="请输入15字以上描述" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </div>
      <div class="feedback-title">
        <div>请提供问题相关截图或照片</div>
        <div>{{fileList.length}}/3</div>
      </div>

      <div class="feedback-img">

        <van-uploader v-model="fileList"
                      :max-count="3"
                      :multiple="true"
                      :before-read="beforeRead"
                      :after-read="afterRead"
                      :before-delete="delUploadImg"
                      upload-icon="plus"
        />

      </div>

      <div class="activity-button" @click="submitForm('ruleForm')">
        <span>提交</span>
      </div>

    </el-form>


  </div>


</template>

<script>
    import axios from 'axios'
    import Vue from 'vue';
    import { Uploader } from 'vant';
    import {getLocal} from "../../../../assets/service/auth";
    import {uploadImgs} from "../../../../assets/api/v3";
    Vue.use(Uploader);
    export default {
        name: "feedback",
        data () {
            return {

                ruleForm: {
                    desc: '',
                    radio:'',
                },
                rules: {
                    radio: [
                        { required: true, message: '请至少选择反馈的问题点', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, min: 15, max: 240, message: '请填写至少15字以上问题描述', trigger: 'blur' }
                    ]
                },
                fileList: [
                  /*  { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
                    // Uploader 根据文件后缀来判断是否为图片文件
                    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                    { url: 'http://www.itdream.site/upload/202004/03.jpg', isImage: true },*/
                ],
                uploadUrl: "/zz//upload/file",
                headers: {
                    token: getLocal('token'),
                },
            }


        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm.fileList = this.fileList;
                        if(this.fileList.length == 0){
                            this.$message("请至少上传一张照片！")
                            return false;
                        }
                        // 提交逻辑
                        this.$message("完成后台接口")

                    } else {
                        return false;
                    }
                });



            },

            /*图片上传*/
            // 返回布尔值
            beforeRead(file) {
                if (file instanceof Array) {
                    //判断是否是数组
                    file.forEach((v) => {
                        this.checkFile(v);
                    });
                } else {
                    this.checkFile(file);
                }
                return true;
            },
            //图片类型检查
            checkFile(file) {
                const format = ["jpg", "png", "jpeg"];
                const index = file.name.lastIndexOf(".");
                const finalName = file.name.substr(index + 1);
                if (!format.includes(finalName.toLowerCase())) {
                    this.$message("请上传" + format.join(",") + "格式图片")
                    return false;
                }
            },
            // 添加图片回调
            afterRead(file) {
                let that = this;
                file.status = "uploading";
                file.message = "上传中...";
                this.uploadImg(file, that);
            },
            //上传
            uploadImg(file, that) {
                const formData = new FormData();
                formData.append('file', file.file );
                console.log(that.fileList);
                axios
                    .post(this.uploadUrl, formData, )
                    .then((res) => {
                        /**
                         * {
	"code": 200,
	"originalUrl": "/imgs/20210516/a27c023d-1a2a-4a5e-9cde-9d662ff751b5.jpg",
	"error": null,
	"thumbnailUrl": "/imgs/20210516/a27c023d-1a2a-4a5e-9cde-9d662ff751b5_small.jpg"
}
                         */
                        if (res.data.code) {
                            file.status = "success";
                            file.message = "上传成功";
                            file.url = res.data.originalUrl;
                        }
                    })
                    .catch((err) => {
                        this.$notify({
                            type: "warning",
                            message: "上传失败",
                        });
                    });

            },
            //删除
            delUploadImg(item) {
                this.fileList = this.fileList.filter((v) => v.url != item.url);
            }

        }
    }
</script>

<style lang="less" scoped>

  .feedback-wrap{
    width: 90%;
    margin: auto;
    .feedback-title{
      font-weight: 400;
      font-size: .6rem;
      color: rgba(157, 158, 157, 1);
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
    }

    .feedback-radio{
      border-radius: 10px;
      font-size: 0.6rem;
      padding: 5px 10px;
      background-color: rgb(255, 255, 255);
      .el-radio{
        display: block;
        margin: 15px 0;
      }
      /deep/ .el-form-item__content{
        margin-left: 0px !important;
      }
    }

    .feedback-detail{

      /deep/ .el-textarea__inner{
        height: 7rem;
      }
      /deep/ .el-form-item__content{
        margin-left: 0px !important;
      }
    }

    .feedback-img{
      height: 5rem;
      border-radius: 10px;
      font-size: 0.6rem;
      padding: 5px 10px;
      background-color: rgb(255, 255, 255);

      /deep/ .el-upload--picture-card{
        width: 80px;
        height: 80px;
        line-height: 6rem;
      }
      /deep/ .el-upload-list__item{
        width: 80px;
        height: 80px;
      }

    }



    .activity-button{
      width: 85%;
      height: 2.5rem;
      z-index: 13;
      background-color: #259b24;
      color: #ffffff;
      border-radius: 25px;
      font-size: 1rem;
      text-align: center;
      opacity: 1;
      margin: 25px auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }


</style>

java代码

	/**
	 *
	 * @param file
	 * @return
	 */
	@RequestMapping(value = "/file")
	@ResponseBody
	public Map<String, Object> doUploadFiles(@RequestParam("file") MultipartFile file) {
		log.debug("Upload form save with: " + file);
		Map<String, Object> map = new HashMap<String, Object>();

		map = ImageCommonUtils.uploadFileAndCreateThumbnail(file);

		return map;
	}