uni-app が写真のアップロードをどのように実装するかを分析してみましょう

この記事では、画像のアップロード方法を中心に、uniappに関する知識を紹介します。実装方法を見ていきましょう。皆様のお役に立てれば幸いです。

#推奨: 「

uniapp チュートリアル 」

1. はじめに

アプリケーション

uni-appクロスプラットフォーム アプリ プロジェクトを開発する場合、写真やドキュメントなどのリソースをアップロードするのが一般的です。機能要件は非常に一般的です: フォト フレーム ボタンをクリックしてアップロードする写真を選択し、各写真をクリックしてプレビューし、各画像の削除アイコンをクリックして、対応する画像を削除します。基本的な機能は次のとおりです:

ローカル アルバムから写真を選択するか、カメラを使用して写真を撮影し、写真をアップロードします;
• 選択したアップロードされた写真をプレビューできます。
• 選択した写真を削除します。間違った写真または選択されていない写真;

2. プロジェクトの実践

uni-app ポータルを検討した後、公式 Web サイトでは次のことを推奨しています。アプリケーション

uni.chooseImage(OBJECT)ローカル アルバムから写真を選択するか、カメラを使用して写真を撮るためのインターフェイス。

ポータルで言及されている

の場合、ほとんどの写真はアップロード用に選択されており、

uni ui はより完全な uni-file- をカプセル化します。 picker コンポーネント、ファイル選択、uniCloud の無料ストレージと CDN へのアップロード、ワンストップ統合。強くお勧めします。

私はそれに同意しません。実践を通じて、このインターフェイスでは、クライアントが画像リソースを

uniCloud バックグラウンド サーバーにアップロードできるようにすることしかできないことがわかります。ローカルサーバーをサポートしていないため、機能要件を満たさないため、注意して使用してください。

プロジェクト実装ページの一般的なロジックは次のとおりです。完全なページ実装ロジックは、「ユニアプリによる画像のアップロード、削除、プレビュー、圧縮の実装」からダウンロードできます。

ビュー レンダリング

<template>
	<view>
		<!-- 上传图片 -->
		<view>
			<view>
				<image></image>
				<view>
					<uni-icons></uni-icons>
				</view>
			</view>
			<view>
				<image></image>
			</view>
			<!-- 图片数量提示 -->
			<view>{{curTotal}}/3</view>
		</view></view></template>

JS ロジック レイヤー - 画像のアップロード

// 图片选择上传upload() {
	var _self = this;
	// 图片选择，只支持一次选择一张图片
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], //从相册、相机选择
		success: function (res) {
			console.log('res:', res)
			_self.curTotal++;
			_self.imgList.push(res.tempFilePaths[0]);
			const tempFilePaths = res.tempFilePaths[0];
			// 图片上传
			const uploadTask = uni.uploadFile({
				url : 'http://22.189.25.91:9988/admin/sys-file/upload', // post请求地址
			    filePath: tempFilePaths,
			    name: 'file',  // 待确认
			    header: {
					'Content-Type': 'multipart/form-data',
					'Authorization': getApp().globalData.token || 'Basic YXBwOmFwcA=='
				},
				success: function (uploadFileRes) {
					console.log('Success:', uploadFileRes);
					_self.imgsID.push(JSON.parse(uploadFileRes.data).data.fileId);
					console.log('_self.imgsID:', _self.imgsID)
				},
				fail: function (uploadFileFail) {
					console.log('Error:', uploadFileFail.data);
				},
				complete: ()=> {
					console.log('Complete:');
				}
			});
		},
		error : function(e){
			console.log(e);
		}
   });}

JS ロジック レイヤー - 画像のプレビュー

/**
 * 图片预览
 * @param {Object} i 选择的图片索引
 * @param {Object} imgList 自行封装的图片数组
 */viewImage(i, imgList) {
	let imgurl = []
	imgList.forEach(item => imgurl.push(item))
	uni.previewImage({
		urls: imgurl,
		current: imgList[i]
	});}

JS 論理レイヤー画像の削除

/** 图片删除
 * @param {Object} i 删除图片的索引
 * @param {Object} imgList 自行封装的图片数组
 */delImg(i, imgList, imgsID) {
	uni.showModal({
		title: '提示',
		content: '确定要删除照片吗？',
		cancelText: '取消',
		confirmText: '确定',
		success: res => {
			if(res.confirm) {
				imgList.splice(i, 1);
				imgsID.splice(i, 1);
				this.curTotal--;
			}
		}
	})}}

JS 論理レイヤー画像圧縮

// src: 压缩转换原始图片的路径// _this: 当前的this，如果不想传递this可将该函数改为箭头函数// callback: 回调函数，详情chooseImage方法function compressImage(src, _this, callback) {
	var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //设置压缩后图片的路径 
	var width, height, quality;
	width = "80%";
	height = "80%";
	quality = 80;
	// 具体情况可查看HTML5+文档 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
	plus.zip.compressImage({
			src: src,
			dst: dstname,
			overwrite: true,
			quality: quality,
			width: width,
			height: height		},
		function(event) {
			callback(event.target, dstname, _this);
		},
		function(error) {
			return src;
		});}

注: アップロードする前に画像を圧縮してください。画像の圧縮時間が長すぎるため、

await を使用して画像を圧縮してからアップロードする必要があります。そうしないと、圧縮の前にアップロードが実行されます。

アプリケーションの効果は次のとおりです:

写真を撮るか、アルバムから写真を選択する/写真をアップロードします

#写真 3 枚のアップロード/写真の削除
##3. 知識ポイントのまとめ

3.1 実装原則

クライアント パス

uni.chooseImage()

メソッドは、ローカル アルバムの写真を選択するか写真を撮り、ローカル リソースの一時ファイル パスを取得して、uni.uploadFile を通じて POST リクエスト メソッドを使用します。 () このメソッドはローカル リソースを開発者サーバーにアップロードします。POST リクエストの content-type は multipart/form-data です。 3.2 注意事項

画像選択アプリケーション
• uni.chooseImage()

  実装では、慎重にカプセル化されたuni uiを使用してください。いわゆるより完全な uni-file-picker コンポーネントは、リソース ファイルを選択して uniCloud および cdn の無料ストレージにアップロードし、ワンストップの統合を提供します。変更することはできません。使用しないことを強くお勧めします。

画像アップロード アプリケーション
• uni.uploadFile()

  実装では、アップロードが成功した後にコールバック関数によって返される uploadFileRes.data はString 型。オブジェクトの変換時に JSON.parse() を適用する必要があります。 <pre class="brush:php;toolbar:false">JSON.parse(uploadFileRes.data).data.fileId)</pre> <pre class="brush:php;toolbar:false">{ &quot;data&quot;: &quot;{\&quot;code\&quot;:0,\&quot;msg\&quot;:null,\&quot;data\&quot;:{\&quot;bucketName\&quot;:\&quot;cicc\&quot;,\&quot;fileName\&quot;:\&quot;5aaa39d669224ffb869b60d245b0751a.jpg\&quot;,\&quot;original\&quot;:\&quot;1644999553865_mmexport1644913914292.jpg\&quot;,\&quot;url\&quot;:\&quot;/admin/sys-file/cicc/5aaa39d669224ffb869b60d245b0751a.jpg\&quot;,\&quot;fileId\&quot;:\&quot;172\&quot;}}&quot;, &quot;statusCode&quot;: 200, &quot;errMsg&quot;: &quot;uploadFile:ok&quot;}</pre>

• uni.uploadFile()

  OBJECT パラメーターの説明セクションの name 属性は、に対応する key です。アップロードするファイル。開発者は、サーバー側でこの key を介してファイルのバイナリ コンテンツを取得できます。フロントエンドとバックエンドはこのキーと一致している必要があります。そうでない場合、サービスは一致しません。リクエストできるようになります。
  

画像プレビュー アプリケーション
• uni.previewImage()

  落とし穴なしで実装されており、ニーズに応じてポータル パラメーターに従って使用できます。 。

推奨: 「

uniapp 学習チュートリアル

」

以上がuni-app が写真のアップロードをどのように実装するかを分析してみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。