vue 파일 업로드 기능 구현
일단 이 루 고 싶 은 효 과 를 말씀 드 리 겠 습 니 다.
캡 처 에서 보 듯 이 기업 과 업로드 해 야 할 서 류 를 백 엔 드 에 제출 해 처리 해 야 한다 면 어떻게 실현 할 것 인 가 를 말 해 보 자.
vue 실현
vue 페이지 코드
<el-upload
class="upload-demo"
ref="upload"
action="doUpload"
:limit="1"
:file-list="fileList"
:before-upload="beforeUpload">
<el-button slot="trigger" size="small" type="primary"> </el-button>
<a href="./static/moban.xlsx" rel="external nofollow" download=" "><el-button size="small" type="success"> </el-button></a>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"> </el-button> -->
<div slot="tip" class="el-upload__tip"> excel , 5MB</div>
<div slot="tip" class="el-upload-list__item-name">{{fileName}}</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="visible = false"> </el-button>
<el-button type="primary" @click="submitUpload()"> </el-button>
</span>
이전 크기 검사 업로드
beforeUpload(file){
debugger
console.log(file,' ');
this.files = file;
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const isLt2M = file.size / 1024 / 1024 < 5
if (!extension && !extension2) {
this.$message.warning(' xls、xlsx !')
return
}
if (!isLt2M) {
this.$message.warning(' 5MB!')
return
}
this.fileName = file.name;
return false // false
},
수 동 업로드 확인 제출
submitUpload() {
debugger
console.log(' '+this.files.name)
if(this.fileName == ""){
this.$message.warning(' !')
return false
}
let fileFormData = new FormData();
fileFormData.append('file', this.files, this.fileName);//filename ,file , ,test.zip
let requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
},
}
this.$http.post(`/basedata/oesmembers/upload?companyId=`+this.company, fileFormData, requestConfig).then((res) => {
debugger
if (data && data.code === 0) {
this.$message({
message: ' ',
type: 'success',
duration: 1500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
this.$message.error(data.msg)
}
})
}
백 스테이지
/**
*
*/
@PostMapping("/upload")
@RequiresPermissions("basedata:oesmembers:upload")
public R upload(@RequestParam("file") MultipartFile file, @RequestParam("companyId") Integer companyId) {
System.out.println(companyId);
if (file.isEmpty()) {
throw new RRException(" ");
}
//
return R.ok();
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.