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]拿到的值一样,接着操作就是和上面相同了

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

使用Vue传递multipart/form-data参数,可能会遇到无法传递的问题。其一个可能的原因是未正确设置表单的enctype属性。即便是使用Vue,也需要确保表单是正确设置的。 enctype属性告诉浏览器表单数据应该如何编码。当表单包括二进制数据(如图片或文件),必须设置为multipart/form-data。但是,Vue默认情况下不会自动将enctype设置为multipart/form-data。因此,需要手动设置表单的enctype属性为multipart/form-data。 设置表单的enctype属性有两种方法。第一种方法是在HTML代码手动设置表单的enctype属性。例如: <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> 第二种方法是在Vue组件使用v-bind指令设置表单的enctype属性。例如: <template> <form action="/upload" method="post" :enctype="'multipart/form-data'"> <input type="file" name="file" /> <input type="submit" value="Upload" /> </form> </template> 在第二种方法,v-bind指令允许您绑定一个表达式到Vue组件的HTML属性。在这种情况下,使用v-bind指令将enctype属性设置为multipart/form-data。这将确保浏览器正确地处理表单数据,并将二进制数据正常提交到服务器。 总之,要在Vue成功传递multipart/form-data参数,您需要确保正确设置表单的enctype属性。此外,记得确保你的服务器端对multipart/form-data请求有正确的处理方式。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值