element-ui 다 중 파일 업로드 구현 예제
먼저 파일 을 일곱 마리 의 소 에 업로드 한 다음,일곱 마리 의 소 가 되 돌아 오 는 파일 접근 경 로 를 서버 에 업로드 합 니 다.
<div class="upload-music-container">
<el-upload
class="upload-music"
ref="upload"
action="http://up-z2.qiniup.com/"
:data="{token:uploadToken}"
multiple
accept=".mp3"
:before-upload="uploadBefore"
:on-change="uploadChange"
:on-success="uploadSuccess"
:on-error="uploadError">
<el-button size="small" type="primary"> </el-button>
<div slot="tip" class="el-upload__tip"> mp3 , 500M</div>
</el-upload>
<el-button size="small" type="success" @click="submitUpload"> </el-button>
</div>
export default {
name: 'uploadMusic',
data() {
return {
headers: {},
uploadToken: null,
canUploadMore: true,
fileList: null,
}
},
created() {
this.headers = {} // server header
this.getUploadToken()
},
methods: {
// token
getUploadToken() {
this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {
if (response.data.status == 200) {
let resp = response.data.data
this.uploadToken = resp.token
} else {
this.$message({
message: ' , ',
type: 'error'
})
}
})
},
//
getVideoPlayTime(file, fileList) {
let self = this
//
try {
let url = URL.createObjectURL(file.raw);
// , audio
let audioElement = new Audio(url);
let duration;
audioElement.addEventListener("loadedmetadata", function (_event) {
duration = audioElement.duration;
file.duration = duration
self.fileList = fileList
});
} catch (e) {
console.log(e)
}
},
//
uploadChange(file, fileList) {
this.fileList = fileList
let totalSize = 0
for (let file of fileList) {
totalSize += file.raw.size
}
if (totalSize > 500 * 1024 * 1024) {
this.canUploadMore = false
this.$message({
message: ' 500M',
type: 'warn'
})
} else {
this.canUploadMore = true
}
},
uploadBefore(file) {
if (this.canUploadMore) {
return true
}
return false
},
//
uploadSuccess(response, file, fileList) {
this.getVideoPlayTime(file, fileList)
},
//
uploadError(err, file, fileList) {
console.log(err)
},
//
getUploadMusicList() {
let musicList = []
for (let file of this.fileList) {
if (file.response && file.response.key) {
musicList.push({
"play_time": file.duration, //
"size": file.size/1024, // kb
"song_name": file.name, //
"voice_url": "xxxx" //
})
}
}
return musicList
},
//
submitUpload() {
let musicList = this.getUploadMusicList()
this.$http.post('xxxxxxxxxx', {music_list: musicList}, {headers: this.headers}).then(response => {
if (response.data.status == 200) {
this.$refs.upload.clearFiles() //
this.$message({
message: ' ',
type: 'success'
})
} else{
this.$message({
message: ' , ',
type: 'error'
})
}
}).catch(err => {
this.$message({
message: ' , ',
type: 'error'
})
})
},
}
}
프로젝트 업로드 2:서버 에 직접 파일 업로드
<div class="upload-music-container">
<el-upload
class="upload-music"
ref="upload"
multiple
action=""
:auto-upload="false"
:http-request="uploadFile">
<el-button slot="trigger" size="small" type="primary"> </el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"> </el-button>
<div slot="tip" class="el-upload__tip"> mp3 , 500M</div>
</el-upload>
</div>
export default {
name: 'uploadMusic',
data() {
return {
fileType:'video',
fileData: new FormData(),
headers:{},
}
},
추가:element-ui 다 중 파일 에 폼 매개 변수 업로드 실현element-ui 는 사진 을 나 누 어 여러 번 업로드 하고 한 번 에 한 개의 사진 을 업로드 합 니 다.
한 번 에 여러 개의 그림 을 올 리 려 면 자동 업 로드 를 꺼 야 합 니 다:auto-upload='false',동시에 element 내장 업로드 함 수 를 사용 하지 않 고 자신 이 쓴 onsubmit()로 바 꿔 야 합 니 다.
그림 의 추가 삭 제 를 실현 하기 위해 on-change 와 on-remove 이벤트 에서 filelist(filelist 는 실질 적 으로 uploadFiles 의 별명 이 고 uploadFiles 는 element 에 내 장 된 업로드 할 파일 이나 그림 을 저장 하 는 배열)를 얻 을 수 있 습 니 다.마지막 으로 제출 하 는 과정 에서 filelist 의 값 을 formdata 대상 에 일일이 추가 합 니 다(formdata.append().formdata.delete()를 삭제 하고 일괄 업로드 합 니 다.
ps:on-preview 이벤트 와
<template>
<div>
<el-upload
action="http://127.0.0.1:8000/api/UploadFile/"
list-type="picture-card"
:auto-upload="false"
:on-change="OnChange"
:on-remove="OnRemove"
:on-preview="handlePictureCardPreview"
:before-remove="beforeRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-button type="" @click="fun"> filelist</el-button>
<el-button type="" @click="onSubmit"> </el-button>
</div>
</template>
<script>
import {host,batchTagInfo} from '../../api/api'
export default {
data() {
return {
param: new FormData(),
form:{},
count:0,
fileList:[],
dialogVisible:false,
dialogImageUrl:''
};
},
methods: {
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeRemove(file, fileList) {
return this.$confirm(` ${ file.name }?`);
},
OnChange(file,fileList){
this.fileList=fileList
},
OnRemove(file,fileList){
this.fileList=fileList
},
// upload ,
// beforeupload(file) {
// console.log('-------------------------')
// console.log(file);
// //
// //
// this.param = new FormData();
// this.param.append('file[]', file, file.name);
// this.form={
// a:1,
// b:2,
// c:3
// }
// // this.param.append('file[]', file, file.name);
// this.param.append('form',form)
// return true;
// },
fun(){
console.log('------------------------')
console.log(this.fileList)
},
onSubmit(){
this.form={
a:1,
b:2,
c:3
}
let file=''
for(let x in this.form){
this.param.append(x,this.form[x])
}
for(let i=0;i<this.fileList.length;i++){
file='file'+this.count
this.count++
this.param.append(file,this.fileList[i].raw)
}
batchTagInfo(this.param)
.then(res=>{
alert(res)
})
}
}
}
</script>
<style>
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다.멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.