element ui 上传文件组件

 <el-upload
           class="upload-demo"
           action="/api_backend.php?r=groupcall-config/import-batch"
           :on-preview="handlePreview"
           :on-remove="handleRemove"
          :before-remove="beforeRemove"
           multiple
           :limit="1"
           :on-success="success"
           :on-exceed="handleExceed"
           :data="uploadData">
           <el-button type="primary" plain style="width: 120px;text-align: left;margin-left: 15px;"><i class="fa fa-upload">选择导入文件</i></el-button>
 </el-upload>
//自定义请求
 <el-upload class="upload-demo" drag action="123"  :before-upload="beforeUpload"     
    multiple  ref="newupload" :auto-upload="false" accept=".mp4,.flv,.mov" :on- 
     change="newhandleChange"  :on-success="newhandlesuccess">
   <i class="el-icon-upload"></i>
</el-upload>
<el-button type="primary" @click="newSubmitForm()" class="yes-btn">
确 定</el-button>
<el-button @click="resetForm('newform')">重 置</el-button>
//data为参数(post方式)
 new Vue({
        el: "#DataBase",
        data: {
            uploadData:{
                id:""
            },  
        },
       methods: {
           //上传
            success(response,file,files){
                if(response.statusCode!=1){
                    this.fileList = []
                }
                this.init()
                this.$alert(response.message)
            },
            handleRemove(file,fileList){
                console.log(file, fileList);
            },
            handlePreview(file){
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }?`);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val)
            },
            handleSizeChange(val) {
                this.page_size = val
                this.init()
            },  
          //自定义上传
         beforeUpload (file) {
          console.log(file)
          let fd = new FormData()
          fd.append('file', file)
          fd.append('groupId', this.groupId)
          // console.log(fd)
           axios.post(url, fd, {
          console.log(res)
         })
       return true
       },
      newSubmitForm () {
          this.$refs.newupload.submit()
      },
    
    })

自定义请求,action写个任意的url,会出现404错误,然后设置auto-upload="false" ,这样就可以在方法中自定义请求方式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容