美文网首页Vue
element ui 上传文件组件

element ui 上传文件组件

作者: alive02 | 来源:发表于2018-07-26 18:33 被阅读45次
 <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" ,这样就可以在方法中自定义请求方式

相关文章

网友评论

    本文标题:element ui 上传文件组件

    本文链接:https://www.haomeiwen.com/subject/imximftx.html