기술이 발전함에 따라 개발의 복잡성도 점점 높아지고 있으며, 전통적인 개발 방식은 시스템을 하나의 전체 애플리케이션으로 만들지만 작은 변화나 작은 기능의 추가로 전체 로직이 바뀌는 경우가 종종 발생합니다. 수정은 몸 전체에 영향을 미칩니다. 컴포넌트 개발을 통해 개별 개발 및 유지보수를 효과적으로 수행할 수 있으며, 원하는 대로 결합할 수 있습니다. 낮은 개발 효율성을 대폭 개선하고 유지 관리 비용을 절감합니다.
구성 요소화는 여러 번 반복한 후 복잡한 비즈니스 시나리오와 제품이 포함된 프런트 엔드 애플리케이션을 위한 유일한 방법입니다. 컴포넌트화에는 표면적으로 보이는 모듈 분할과 분리가 필요하며, 비즈니스 특성에 따른 모듈 분할 전략, 모듈 간 상호 작용 방식, 시스템 구축 등 컴포넌트화를 지원하기 위한 많은 노력이 필요합니다.
이 문서에 소개된 구성 요소는 다음과 같습니다.
프런트엔드 Vue 이미지 업로드 구성 요소는 단일 파일, 다중 파일 업로드, 사용자 정의 업로드 수량, 미리보기, 이미지 삭제 및 이미지 압축을 지원합니다. 전체 코드를 다운로드하려면 uni-app 플러그인 마켓 주소: https:/를 방문하세요. /ext.dcloud.net.cn/plugin?id= 13099
프런트엔드 구성요소에 대한 자세한 내용은 WeChat 공개 계정을 참조하세요. 프런트엔드 구성요소 개발
렌더링은 다음과 같습니다.
구성요소 초기화
#### 지침
``사용 방법
<!-- count: 최대 업로드 횟수 imageList: 이미지 업로드 선택 배열 -->
<cc-imgPreDelUpload :count="6" :imageList="imgList"></cc-imgPreDelUpload>
<!-- 업로드 요청 이벤트-->
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
title: '따뜻한 알림',
내용: '사진을 올려주세요'
})
반품;
}
console.log('이미지 업로드 배열 = ' + JSON.stringify(this.imgList));
// 서버 주소 업로드 주소는 예시일 뿐 실제 인터페이스 주소는 아닙니다.
baseUrl = "http://gzcc.com/cc//appSc/up" 시키십시오.
uni.showLoading({
제목: '업로드 중'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //이것은 예시일 뿐이며 실제 인터페이스 주소는 아닙니다.
파일: this.imgList, //이미지 배열 요청
formData: {}, //요청 매개변수
성공: (uploadFileRes) => {
uni.hideLoading();
console.log('업로드 성공 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != 문자열) {
res.progress = '0';
}
//여기에서 업로드 진행 상황을 시뮬레이션합니다.
uni.showLoading({
title: '업로드 진행률: ' + res.progress + '%'
})
console.log('업로드 진행상황' + res.progress);
console.log('업로드된 데이터 길이' + res.totalBytesSent);
console.log('업로드가 예상되는 총 데이터 길이' + res.totalBytesExpectedToSend);
});
}
}
````
#### HTML 코드 부분
``html
<템플릿>
<보기 클래스="콘텐츠">
<!-- count: 최대 업로드 횟수 imageList: 이미지 업로드 선택 배열 -->
<cc-imgPreDelUpload :count="6" :imageList="imgList"></cc-imgPreDelUpload>
<버튼 스타일="너비: 120px;배경색: 골동품흰색; 여백-상단: 60px;" @click="goUploadClick"> 위로
</버튼>
</view>
</템플릿>
<스크립트>
기본값 내보내기 {
데이터() {
반품 {
img목록: []
}
},
방법: {
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
title: '따뜻한 알림',
내용: '사진을 올려주세요'
})
반품;
}
console.log('이미지 업로드 배열 = ' + JSON.stringify(this.imgList));
// 서버 주소 업로드 주소는 예시일 뿐 실제 인터페이스 주소는 아닙니다.
baseUrl = "http://gzcc.com/cc//appSc/up" 시키십시오.
uni.showLoading({
제목: '업로드 중'
})
const uploadTask = uni.uploadFile({
url: baseUrl, //이것은 예시일 뿐이며 실제 인터페이스 주소는 아닙니다.
파일: this.imgList, //이미지 배열 요청
formData: {}, //요청 매개변수
성공: (uploadFileRes) => {
uni.hideLoading();
console.log('업로드 성공 = ' + uploadFileRes.data);
}
});
uploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != 문자열) {
res.progress = '0';
}
//여기에서 업로드 진행 상황을 시뮬레이션합니다.
uni.showLoading({
title: '업로드 진행률: ' + res.progress + '%'
})
console.log('업로드 진행상황' + res.progress);
console.log('업로드된 데이터 길이' + res.totalBytesSent);
console.log('업로드가 예상되는 총 데이터 길이' + res.totalBytesExpectedToSend);
});
}
}
}
</script>
<스타일>
.콘텐츠 {
디스플레이: 플렉스;
플렉스 방향: 열;
}
</style>
````