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

需求：

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

因为打包的时候会有限制，超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里面

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

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