uniapp は静的リソースの画像をアップロードして使用します (便利)

まず、主にビジネス上の必要性から、これを行う理由を説明します。たとえば、次のようになります。

uniapp が小さなプログラムに移行するとき, 常に下請けの問題に遭遇する. これは小さなプログラムの厳格なルールです. 下請けはより多くのことを含むため, パッケージのサイズを考慮する必要があるため, 小さなプログラムは次のように規定されています. 2M を超えることはできません。メイン パッケージはサブパッケージ リソースを参照できません。. .

現時点では、参照用の画像アップロード サーバー フロントエンドなど、メイン パッケージの無駄なリソースを削減するために最善を尽くします。

ステップ1：

<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
	<text class='cuIcon-cameraadd'>上传</text>
</view>

<script>
	ChooseImage() {
		const _this = this
		uni.chooseImage({
			count: 4, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: (res) => {
			const tempFilePaths = res.tempFilePaths;
			const uploadTask = uni.uploadFile({// 这里是重点
			url: '后端提供服务器的接口地址',
			filePath: tempFilePaths[0],//选择图片的path
			name: 'file', //图片的名字
			data: {}, //需要传递的参数
			header: {AccessToken: "登录后端返回的Token，这里记住参数的数据类型"},
			success: (uploadFileRes) => {//如果code等于200说明ok了
				_this.imgList = [..._this.imgList, uploadFileRes.data]
			    }
			});
		  }
		});
	},
</script>

サーバーにアップロードする必要がある写真を引き出す

ステップ2：

引用画像

まず、main.js ファイルにグローバル メソッドをマウントします。

Vue.prototype.imageURL = function（img）{// 这里的img是形参
    return 'https://www.baidu.com后端的图片接口地址'+img
}

次に、写真を参照する必要があります。

<image :src="imageURL('传递后端的图片名')"></image>

このようにして、サーバー上の画像を参照できます