美文网首页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