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

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

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

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

      

 
                    
                    
                        
                    
                    
                       
                        
                      
                    
                    
                      
                        

                          
                            
点击上传
                        
                        
                            
                          
                      
                    
                    
                        
                    
                    
                        保存
                    
                

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

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

               已阅读并上传

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

  // 模拟点击文件选择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]拿到的值一样,接着操作就是和上面相同了

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