vue项目中使用multipart/form-data进行提交数据, 上传文件,upload,elementui

     在前面的博文里我说到了提交文件到文件服务器, 也说到了以base64格式上传文件,那么本文就讲下以文件流的形式提交文件数据

      在我们的原生表单中,提交文件很简单, 只需要将 enctype设置为multipart/form-data就可以实现提交了,但是在vue项目中,使用elementui中的表单组件,就不能够通过设置enctype来实现了.

      首先看一下我们的表单代码,如下:

      

 <el-form :rules="rules" ref="form" :model="form" label-width="150px" style='margin-top:2em;' :hide-required-asterisk='true'>
                    
                    <el-form-item label="数据集名称:" prop="dataset_name"  style="padding:0 1em">
                        <el-input v-model="form.dataset_name"></el-input>
                    </el-form-item>
                    <el-form-item label="所属部位名称:" style="padding:0 1em" prop="part_id">
                       <el-select v-model="form.part_id" placeholder="请选择所属部位" style='width:100%;'>
                        <el-option :label="item.partName" :value="item.id" v-for='item in part' :key='item.id'></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="上传数据集:" style="padding:0 1em">
                      
                        <div class="upload" @click='toAdd'>
                          <i class="el-icon-upload"></i>
                            <div class="el-upload__text">点击上传</div>
                        </div>
                        <el-progress v-if='proc' :percentage="uploadPercent"></el-progress>
                            
                          
                      
                    </el-form-item>
                    <el-form-item label="描述信息:"  style="padding:0 1em" required>
                        <el-input placeholder='该数据集主要是用于xxx' type="textarea" v-model="form.describe"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style='float:right;margin-right:1em;' type="primary" size="small" @click="onSubmit('form')">保存</el-button>
                    </el-form-item>
                </el-form>

   我是把文件选择,放到了表单外面处理了,这个无所谓,都可以

   下面是文件选择器代码,如下:

<input type="file" @change="getFile($event,'file_avatar')" style="display:none;" id="unloadFile">
               <el-button type="primary" size='small' @click='toUploadFile'>已阅读并上传</el-button>

  注意,我这里因为不能直接显示文件选择器,而是要在点击阅读上传后,再打开文件选择,所以我这里使用了模拟点击,如果你是直接可以展示文件选择器,那么可以忽略这步.  代码如下:

  // 模拟点击文件选择input
          toUploadFile(){
              let btn = document.getElementById('unloadFile')
              btn.click()
              this.dialogVisible = false
              this.uploadPercent = 0
          },

   接着选择完文件之后,触发我们给input绑定的@change方法,代码如下:

         // 选择文件
          getFile(event, input_file_name) {
            this.formData.append("dataset_file", event.target.files[0]);
            this.proc = true
            let that = this
              setTimeout(function(){
                that.uploadPercent = 100
             },2000)
           },

 此处event.target.files[0]就是我们的文件对象,dataset_file是后台要求的字段名,注意this.formData我是声明在了data的返回值中,是通过构造函数FormData创建出来的实例, 代码如下:

 export default{
        data(){
            return {
              formData: new FormData(),
                }
              }
  }

  接着就是表单的提交了,那你会问,那表单中写的数据怎么办,怎么使用,怎么提交,那下面的代码就是答案:

onSubmit() {
               
                    this.formData.append("dataset_name", this.form.dataset_name);
                    this.formData.append("describe", this.form.describe);
                    this.formData.append("part_id", this.form.part_id);

                    axioss.post('/datasets/', this.formData).then((r)=>{
                       this.$notify({
                        title: '成功',
                        message: '这是一条成功的提示消息',
                        type: 'success'
                      })
                       this.$router.push({path:'/filemanage/data'})
                    }).catch(e=>{
                      this.$notify.error({
                            title: '失败',
                            message: '创建数据集失败'
                     })     
                    })
                 
               
             },
           

  就是把表单中的数据全部放到this.formData中,分号中为后台需要提供的字段名,后面为表单双向数据绑定拿到的值.

 

   如果你使用的不是input type=file,而是使用elementui中的upload上传组件来做的话,那么在onChange的时候,有两个参数,file和fileList,在fileList的第一个子元素中,有一个raw属性,这个就是我们所需要的文件对象,和上面我们写的getFile中的event.target.files[0]拿到的值一样,接着操作就是和上面相同了

    这就是全部内容,欢迎指正,探讨