#前端# #小程序#如何将本地图片上传到服务器，并进行引入项目？

需求：

在我们进行前端开发中，特别是小程序的开发中，

因为打包的时候会有限制，超2m就打包不了，

这个时候，有可能是图片过多占内存，

那只需要将本地的图片上传到服务器，再把本地文件夹里面的图片删除就可以了

具体做法：

将图片放到一个文件夹中，并打包发给后端，后端同事会把返回一个地址给你，

类似于/profile/upload/2021/10/31/，

设置在APP.vue这个文件里面，设置全局变量，然后再需要用到图片的页面里面设置变量baseUrl:xxxx，这个baseUrl就是我们的接口地址，

然后在每一张上传到服务器的图片里面，进行拼接就可以了你只需要进行拼接地址即可了

如下：

以下为uni-app/ajax

在ajax.js文件里

// ajax.js

// 引入 Vue 用于将请求实例挂载在 Vue 原型链上
import Vue from 'vue'
// 引入 uni-ajax 模块
import ajax from 'uni-ajax'

let status = false;

let tabbarUrl = [
	"pages/home/index",
	"pages/community/index",
	"pages/personal/index"
];
// 创建请求实例
const instance = ajax.create({
	// 默认配置
	//baseURL: 'http://172.16.0.xxx:8081',//本地地址
	baseURL: 'https://exxxx.xxxxzg.com/web-api/',// 线上地址
	method: 'POST',
	header: {
		post: {
			'Content-Type': 'application/json;charset=utf-8'
		}
	}
})

在App.vue里面

<script>
	export default {
		data() {
			return {
				code: null,
				sessionKey: null,
				signature: null,
				rawData: null,
				encryptedData: null,
				iv: null,
                baseUrl: this.$ajax.baseURL

			}
		},
		
		onLaunch: function() {
			
		},
		onLoad() {

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {

		}
	}
</script>

<style>
	/*每个页面公共css */
	body {
		font-family: 'PingFang-SC-Regular';
	}
	@font-face {
		font-family: 'PingFang-SC-Regular'; //创建一个number_font字体名称
		/* src: url("http://172.16.0.234:8081/profile/upload/style.ttf"); //引入本地字体源文件 */
		/* src: url("https://exercise.zjyqzg.com/web-api//profile/upload/style.ttf"); //引入本地字体源文件 */
	}

	::-webkit-scrollbar {

		display: none !important;

		width: 0 !important;

		height: 0 !important;

		-webkit-appearance: none;

		background: transparent;

	}
</style>

在具体页面（有加用到图片的页面）

data() {
			return {
				baseUrl: this.$ajax.baseURL,
			}
		},

<view >
	
    <image :src="baseUrl + '/profile/upload/2021/10/30/B4.png'"></image>
		
</view>