vue實現檔案的上傳
阿新 • • 發佈:2022-05-09
vue 檔案上傳相關程式碼(我們使用elementui 外掛來實現):
1.前端程式碼 <el-upload class="upload-demo" ref="upload" drag :multiple =false action="/api/job/littleVersionUpload" :auto-upload="false" :file-list= selectedFiles :on-remove="removeFile" :on-change="changeFileState" > <i class="el-icon-upload"></i> <div class="el-upload__text">將檔案拖到此處,或<em>點選此處</em>選中</div> <el-button size="small" type="success" @click.stop="submitUpload">上傳到伺服器</el-button> </el-upload> 實現檔案上傳的是我們宣告的submitUpload方法, 如果我們在submitUpload方法中使用this.$refs.upload.submit(),檔案就會被提交到aciton所指定的位置, 但是如果我們不想在這裡吧路徑寫死,想自己寫檔案提交介面的話,就可以按照如下方式進行提交: 在自定義介面中, 上傳的檔案fileData,要進行如下處理: 我們將其他需要傳遞的引數,通過param新增,或者通過config防止在請求頭中也可以。 let param = new FormData() param.append('file',fileData) //這裡append中的file,是給檔案,起的名字,後端通過該名字獲取指定檔案