網址 https://www.jb51.net/article/143277.htm
before-upload //對文件類型進行判斷 從而是否上否上傳到服務器，而不是用來等待用戶進行操作使用的
auto-upload, on-change //默認直接上傳 無論確定還是取消
<el-upload
ref="upload"
class="upload-demo"
:action="uploadUrl"
//動態綁定上傳路徑 一般就是接口路徑 http://api/upload/file/index
:headers="headers"
//配置含有token的請求頭，this.header={ Authorization:bearer+(this.$store.state.token||'')} store獲取token值 拼接到請求頭
:data='params'
//接口需要的參數 寫在data()里面
:before-upload="beforeUpload"
//上傳文件前，判斷文件大小類型 jpg ，png ，text ，gif
:on-change="handleChange"
//上傳文件
:on-success="handleSuccess"
//成功之后
multiple
//允許多文件上傳
:auto-upload="false"
//控制文件是否自動上傳 最好不要自動上傳 設置成false
:show-file-list="false"
//不顯示文件上傳的樣式
accept=".xls,.xlsx,.png,.jpg,.txt,.doc"
//控制上傳的格式
:file-list="params.formFile">
//上傳的文件會自動在formFile 里面,存在多個文件同時上傳的情況
<el-button size="small" type="primary" >上傳文件</el-button>
</el-upload>
data() {
return {
isConfirm: true, //控制彈框的顯示和隱藏
params: {
group: ‘’,
moduleCode:‘’,
dataId: this.$route.query.id,
accounts: this.$store.state.userInfo.id,
formFile: []
//上傳文件列表
},
}
created(){
this.headers ={Authorization : 'Bearer '+(this.$store.state.token || '')}
}
//上傳文件
async
handleChange(files, fileList) {
if(!this.isConfirm) {
this.isConfirm = true
return;
}
const bo = await this.$confirm('上傳文件, 是否繼續?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
console.log('確定上傳')
return true
}).catch(() => {
console.log('取消上傳')
return false
})
if (bo) {
this.$refs.upload.submit();
this.params.formFile=fileList;
this.isConfirm = false;
} else {
this.params.formFile = []
}
},
注意：是上傳的方法用的鈎子函數，上傳完完成之后刷新也需要鈎子函數
handleSuccess(){
//重新獲取文件列表，刷新頁面
this.GetFileQuery();
//清空文件上傳列表
this.params.formFile = [];
},
//文件上傳之前
beforeUpload(file){
// 對文件類型進行判斷方法
},
注意：刪除方法是自己寫的 所以直接而重新獲取列表就可以刷新，如果像上傳一樣，通用的鈎子函數上傳，那么上傳成功之后就要用鈎子函數刷新
//刪除文件
DelUpload(id){
this.$confirm("確認要刪除嗎？", "提示", {
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
apifileDelete({id:id}).then((res) => {
if(res.msg=='success'){
this.global_function.messageBox('success',"移除成功");
//重新獲取文件列表
this.GetFileQuery();
}
})
})
.catch(() => {
});
},
},
注意事項：
1.配置請求頭是動態綁定用 ：headers='headers' data:{ headers:{} }
2.請求的路徑是動態綁定 ：action='action' 參數也是:data動態綁定
3.不需要自己發請求，直接用方法配置submit()
一，配置請求頭：headers='headers' data:{ headers:{} }
二，請求的路徑是動態綁定 ：action='action' 參數也是:data=‘params’
三，不需要發請求，用方法aubmit（）
