zoukankan      html  css  js  c++  java
  • element多文件上传,带参数

    需求年年有,今年特别多,要求:在新建成员的时候,会上传多个文件,这样后台只写一个接口,新建成员信息和文件 只走一个新建的接口

                 <el-upload
                      class="upload-demo"
                      action
                      multiple
                      :http-request="uploadFile"
                      :on-preview="handlePreview"
                      show-file-list
                      :beforeUpload="beforeAvatarUpload"
                      :on-change="handleChange"
                      :auto-upload="false"
                      ref="upload"
                    >
                      <i class="el-icon-circle-plus clickUpload">
                        <span>点击上传</span>
                      </i>
                      <div slot="tip" class="el-upload__tip lineHeight">上传用户文件,文件大小不超过5M</div>
                  </el-upload>    
                <el-button type="primary" @click="onSubmit()">确定</el-button>

    标红的是特别关键的,:auto-upload="false"  是让文件不立马走接口

     // 文件预览
        handlePreview(file) {
          console.log(file)
        },
        handleChange(file) {
          const isLt2M = file.size / 1024 / 1024 < 5
          if (!isLt2M) {
            this.$message({
              message: '上传文件大小不能超过 5MB!',
              type: 'warning',
            })
            this.$refs.upload.clearFiles()
            return false
          }
        },
        // 文件上传
        uploadFile(param) {
          this.fileData.append('file', param.file)
        },
      // 确定
        onSubmit() {
        let form = {
     
    name:1, 
     
    sex:'男',
     
    age: '20',
     
    like:'sing'
     
    }
     
        this.fileData = new FormData()
       for (let key in form) {
    this.fileData.append(key, form[key])
    }
          this.$refs.upload.submit()
         }

  • 相关阅读:
    从服务器角度分析RPG游戏——NPC的AI
    羽翼特效设计
    坐骑特效设计(二)
    坐骑特效设计
    Unity AssetBundle打包资源工具
    有趣的进度条
    原生与组件
    bower
    yeoman
    grunt+bower+yo
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/13677871.html
Copyright © 2011-2022 走看看