el-upload 手動上傳文件


<el-upload
        style="display: inline"
        ref="upload"
        :show-file-list="false"
        :on-success="onSuccess"
        :on-error="onError"
        accept=".csv,.xls,.xlsx"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :auto-upload="false" //禁止文件自動上傳
        action="..........">  //文件上傳的后端地址
        <!-- :auto-upload="false" -->
        <el-button slot="trigger" size="small" type="primary" style="margin-top: 10px">選擇文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳文件</el-button>
        <!--<el-button size="mini" type="success" >導入</el-button>-->
      </el-upload>
//選擇文件並顯示文件名/文件大小/狀態 等      
handleChange(file, fileList) { this.oploadfileList = []; let size = file.size; if(size < 0.1 * 1024){ //小於0.1KB,則轉化成B size = size.toFixed(2) + "B" }else if(size < 0.1 * 1024 * 1024){ //小於0.1MB,則轉化成KB size = (size/1024).toFixed(2) + "KB" }else if(size < 0.1 * 1024 * 1024 * 1024){ //小於0.1GB,則轉化成MB size = (size/(1024 * 1024)).toFixed(2) + "MB" }else{ //其他轉化成GB size = (size/(1024 * 1024 * 1024)).toFixed(2) + "GB" } let name = file.name; let type = name.substring(name.lastIndexOf('.')+1);//文件后綴名 // console.log(name,size) this.oploadfileList.push({file_name: name, file_size: size,file_jindu: '100%',file_zhuangtai:'已上傳',file_caozuo:'此不可逆操作'}); // console.log(fileList) // this.fileData = new FormData() // var that = this this.fileList = fileList; this.fileData.append('file', file); },
//上傳文件
      submitUpload(file, fileList) {
        this.$refs.upload.submit();
      },
//文件上傳成功后
onSuccess(res, file, fileList) {   console.log(res) },

 onSuccess 的 res 為 this.$refs.upload.submit();文件上傳成功后,接收后端返回過來的值


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM