テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。
コンポーネント化は、複数の反復を経た複雑なビジネス シナリオおよび製品を含むフロントエンド アプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や切り離しだけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。
この記事で紹介するコンポーネントは次のとおりです。
フロントエンド 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({
タイトル：「温かいリマインダー」、
内容: 「写真をアップロードしてください」
})
戻る;
}
console.log('画像アップロード配列 = ' + JSON.stringify(this.imgList));
// サーバー アドレスのアップロード アドレスは単なる例であり、実際のインターフェイス アドレスではありません。
letbaseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
タイトル:「アップロード中」
})
const UploadTask = uni.uploadFile({
url:baseUrl, //これは単なる例であり、実際のインターフェイス アドレスではありません
files: this.imgList, //画像配列をリクエストします
formData: {}, //リクエストパラメータ
成功: (uploadFileRes) => {
uni.hideLoading();
console.log('アップロード成功 = ' + UploadFileRes.data);
}
});
UploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != 文字列) {
res.progress = '0';
}
//ここでアップロードの進行状況をシミュレートします
uni.showLoading({
タイトル: 'アップロードの進行状況: ' + 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>
<button style="width: 120px;background-color: Antiquewhite; margin-top: 60px;" @click="goUploadClick"> 上传
</ボタン>
</ビュー>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
データ（） {
戻る {
画像リスト: []
}
}、
メソッド: {
goUploadClick() {
if (this.imgList.length < 1) {
uni.showModal({
タイトル：「温かいリマインダー」、
内容: 「写真をアップロードしてください」
})
戻る;
}
console.log('画像アップロード配列 = ' + JSON.stringify(this.imgList));
// サーバー アドレスのアップロード アドレスは単なる例であり、実際のインターフェイス アドレスではありません。
letbaseUrl = "http://gzcc.com/cc//appSc/up"
uni.showLoading({
タイトル:「アップロード中」
})
const UploadTask = uni.uploadFile({
url:baseUrl, //これは単なる例であり、実際のインターフェイス アドレスではありません
files: this.imgList, //画像配列をリクエストします
formData: {}, //リクエストパラメータ
成功: (uploadFileRes) => {
uni.hideLoading();
console.log('アップロード成功 = ' + UploadFileRes.data);
}
});
UploadTask.onProgressUpdate((res) => {
if (typeof(res.progress) != 文字列) {
res.progress = '0';
}
//ここでアップロードの進行状況をシミュレートします
uni.showLoading({
タイトル: 'アップロードの進行状況: ' + res.progress + '%'
})
console.log('アップロードの進行状況' + res.progress);
console.log('アップロードされたデータの長さ' + res.totalBytesSent);
console.log('アップロードが予想されるデータの合計長' + res.totalBytesExpectedToSend);
});
}
}
}
</script>
<スタイル>
。コンテンツ {
ディスプレイ: フレックス;
フレックス方向: 列;
}
</スタイル>
「」