el-upload

526 阅读1分钟

多个 upload 上传文件 代码直接复制不可用主要是 注释对应的思路

 <template>
    <el-upload
      class="upload-demo"
      :action="action"  //此处不需要调用 删除后element会报错 所以保留了       
      :auto-upload="false" //不让文件自动上传
       :on-change="beforeupload" //关键内容
      :limit="1"     //下面内容参考element 官网
       :file-list="fileList"
       ref="fileipa"
       accept=".ipa"
      :on-exceed="handleExceedIpa"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        <div>将文件拖到此处,或<em>点击上传</em></div>
      </div>
    </el-upload>
    
    
    <el-upload
      :action="action"
      list-type="picture-card"
      multiple
      :limit="5"
      ref="uploadIphone"
      :on-change="beforeupload1"//关键
      :file-list="fileListIphone"
      :on-exceed="handleExceedIphone"
      :auto-upload="false">
    </el-upload>
 </template>
 
 <script>
       export default {
          data() {
            return {
                uploadForm: new FormData(),
                action:'test',
                id:''
            }
       	},
        methods:{
        //如需要其他条件 自行参考官网
          beforeupload(file){
            this.uploadForm.append("ipafile",file.raw);
          },
        //依次类推其他
          beforeupload1(file){
            this.uploadForm.append("ipafile",file.raw);
          },
          sure(){
            //其它参数
            this.uploadForm.append('id', this.id)
            	axios({
                method:'POST',
                url:'/test',
                data:this.uploadForm,
                headers:{
                      'Content-Type':'multipart/form-data' //值得注意的是,这个地方一定要把请求头更改一下
                    }
               }).then(res=>{
               //请求试过 封装好的axios 异步但是 一直返回错误 (目前没有定位到具体原因有大佬的话可以指出问题)
                console.log(res)
                })
          }
        }
       }
 
 </script>
 
 
 
 下面是原生
 
  html
  
  <input type="file" @change="handleFileChange" ref="inputer"  />
  <input type="file" @change="handleFileChange1" ref="inputer1"  />
  <button id="btn">确认</button>
  
  
  js
  var formData=new FormData();
  handleFileChange function(){
  		 let inputDOM = this.$refs.inputer;
		 let file = inputDOM.files[0];// 通过DOM取文件数据
		 formData.append("posterImg",file);
  }
  handleFileChange1 function(){
  		 let inputDOM = this.$refs.inputer1;
		 let file = inputDOM.files[0];// 通过DOM取文件数据
		 formData.append("posterImg",file);
  }
  
  最后通过点击事件 传递  请求参考上面