上传文件（pdf），携带信息（后台创建文件夹的标识）

<el-dialog :visible.sync="dialogFormVisible" style="width:120%;height:100%;margin-left:-100px">
           <div class="checkbox">
               <h3>请选择年级 <span style="color: red;">(可多选年级)</span> </h3>
               <el-checkbox-group v-model="form.gradeCodeList">
                   <el-checkbox label="11">一年级</el-checkbox>
                   <el-checkbox label="12">二年级</el-checkbox>
                   <el-checkbox label="13">三年级</el-checkbox>
               </el-checkbox-group>
           </div>
           <div class="radio1">
               <h3>请选择项目</h3>
               <el-radio-group v-model="form.projectName">
                   <el-radio label="BMI"></el-radio>
                   <el-radio label="肺活量"></el-radio>
                   <el-radio label="50米跑"></el-radio>
                   <el-radio label="坐位体前屈"></el-radio>
                   <el-radio label="一分钟跳绳"></el-radio>
               </el-radio-group>
           </div>
           <div class="radio2">
               <h3>请选择测评等级</h3>
               <el-radio-group v-model="form.level">
                   <el-radio label="优秀"></el-radio>
                   <el-radio label="良好"></el-radio>
                   <el-radio label="及格"></el-radio>
                   <el-radio label="不及格"></el-radio>
               </el-radio-group>
           </div>
           <div class="radio3">
               <h3>请选择适用性别</h3>
               <el-radio-group v-model="form.sex">
                   <el-radio label="男"></el-radio>
                   <el-radio label="女"></el-radio>
                   <el-radio label="男女通用"></el-radio>
               </el-radio-group>
           </div>
           <div class="upload_demo">
               <h3>请选择模板 <span style="color: red;">(可多选)</span></h3>
               <el-upload

ref="form"

action="/student/uploadPdf (上传的接口，后端所给)"

:headers="headers"

:before-upload="beforeUpload"

:on-exceed="handleExceed"

:on-change="change"

multiple

:before-remove="beforeRemove"

:file-list="fileList"

:limit="6"

:auto-upload="false"

accept=".pdf"

                        >
                   <el-button slot="trigger" type="primary">选取文件</el-button>
               </el-upload>
           </div>
           <div class="btn">
               <el-button type="primary" @click="upload_doc">上传</el-button>
           </div>
       </el-dialog>

</template>

export default {
data() {
return {

dialogFormVisible: false,
               form: {
                   gradeCodeList: [],
                   projectName: '',
                   level: '',
                   sex: '',
                   schoolId: ''
               },

                fileList: [],
               headers: {
                   'Authorization': 'Bearer ' + getToken()
               },

}

methods:{

// 文件超出个数限制时的钩子
handleExceed(file, fileList) {
this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
       },
// 移除文件前弹窗
   beforeRemove(file, fileList) {
  return this.$confirm(`确定移除 ${ file.name }？`);
},
change(file, fileList) {
this.files = fileList
},
uploadFileSubmit(params) {
const loading = this.$loading({
lock: true,
text: '正在上传，请稍后',
spinner: 'el-icon-loading',
customClass: 'loading_style',
background: 'rgba(255, 255, 255, 0.7)'
})

const data = new FormData()
data.append('file', params.file)

beforeUpload(file) {
this.fileList = [...this.fileList, file];
console.log(this.fileList)
           return false;
           },
// 文件和信息上传
upload_doc(form) {
               const file = this.$refs['form'].uploadFiles
               let files = []
               file.forEach(e => {
                   files.push(e.raw)
               })
               console.log(files);
               var data = new FormData()
               for (let i = 0; i < files.length; i++) {
                   data.append('files', files[i])
               }
               for (let j = 0; j < this.form.gradeCodeList.length; j++) {
                   data.append('gradeCodeList', this.form.gradeCodeList[j])
               }
               data.append('projectName', this.form.projectName)
               data.append('level', this.form.level)
               data.append('sex', this.form.sex)

               upload(data).then(res => {
                   this.$message({
                       type: 'success',
                       message: '上传成功!'
                   });
                   console.log(res)
               })

               this.$nextTick(() => {
                   this.form.gradeCodeList = []
                   this.form.projectName = ''
                   this.form.level = ''
                   this.form.sex = ''
                   this.fileList = []
                   this.dialogFormVisible = false
               }, 2000)
           },

}

</script>

   .checkbox {
       border-bottom: 1px solid #999;
       padding: 15px;
       box-sizing: border-box;
   }

   .checkbox .el-checkbox {
       margin: 10px;
       padding: 10px;
       box-sizing: border-box;
   }

   .radio1 {
       border-bottom: 1px solid #999;
       padding: 15px;
       box-sizing: border-box;
   }

   .radio1 .el-radio {
       margin: 10px;
       padding: 10px;
       box-sizing: border-box;
   }

   .radio2 {
       border-bottom: 1px solid #999;
       padding: 15px;
       box-sizing: border-box;
   }

   .radio2 .el-radio {
       margin: 10px;
       padding: 10px;
       box-sizing: border-box;
   }

   .radio3 {
       border-bottom: 1px solid #999;
       padding: 15px;
       box-sizing: border-box;
   }

   .radio3 .el-radio {
       margin: 10px;
       padding: 10px;
       box-sizing: border-box;
   }

   .btn {
       width: 112px;
       margin: 20px auto;
       padding: 20px;
   }
</style>

上传文件（pdf），携带信息（后台创建文件夹的标识）

猜你喜欢