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>

这样我们就可以在服务器上引用图片了