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

news/2024/7/20 1:29:59 标签: vue.js, css, 小程序, 前端, javascript

需求:

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

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


http://www.niftyadmin.cn/n/615201.html

相关文章

007-cobbler+koan自动化重装系统

一、操作步骤 1.在使用cobbler自动化安装的虚拟机上做以下操作 2.安装epel源&#xff08;先配置好yum&#xff09; [rootlocalhost ~]# yum install epel-release -y2.安装koan工具 [rootlocalhost ~]# yum install koan -y3.查看可以重装的列表&#xff08;还可以装别版本的系…

#小程序#如何解决渲染层网络层错误?

使用uni-app开发小程序的一个小坑&#xff1a; 在开发过程中&#xff0c;遇到的一个报错&#xff1a; [渲染层网络层错误] Failed to load font http://172.16.0.234:8081/profile/upload/style.ttf net::ERR_CONNECTION_TIMED_OUT (env: Windows,mp,1.05.2109131; lib: 2.…

#vue# element-ui 如何修改类名

问题&#xff1a; 在使用element组件的时候&#xff0c;经常会出现样式不符合我们项目预期的情况&#xff0c;这个时候我们就可以通过修改组件的样式 步骤如下 使用组件的时候&#xff0c;F12可以找到组件的类名 在页面里面加入<style></style>&#xff08;位置…

ABP框架按条件导出

web层 .js导出事件&#xff1a; //导出为excel文档 $(#btn-export).click(function () { //得到查询的参数 var temp { //这里的键的名字和控制器的变量名必须一直&#xff0c;这边改动&#xff0c;控制器也需要改成一样的 ProcessSteps_RecordId: $("#ProcessSteps_Reco…

#前端#Vue追加样式,实现动态进度条/仪表盘

一、需求&#xff1a; 在开发中&#xff0c;我们时常会遇到一些需要动态获取数据在页面的变化 二、思路&#xff1a; 2.1直接展示效果 追加样式&#xff1a;距离左边、右边的距离&#xff08;纯数据直接展示&#xff09;&#xff08;原生样式&#xff09; &#xff08;1&…

#vue#实现浏览器全屏可视化(进入、退出全屏)附源码

需求&#xff1a; 点击按钮&#xff0c;实现全屏&#xff0c;再次点击&#xff0c;退出全屏 效果如下&#xff1a; &#xff08;1&#xff09;原页面&#xff1a; &#xff08;2&#xff09;点击全屏按钮后的页面&#xff08;已进入全屏模式&#xff09; ​​​​​​​ &…

选择排序精简理解

原理&#xff1a;遍历数组&#xff0c;从第一个开始&#xff0c;将其与剩余的元素进行比较&#xff0c;记录最小的元素及其所在的位置&#xff0c;结束后&#xff0c;将其与应该放到的位置上的元素对调&#xff0c;直到完成排序。 借用网上的动图直观的看下&#xff1a; 思想&a…

#vue# css样式穿透::v-deep的具体使用

一、需求&#xff1a; 使用element-ui等一些第三方组件库时&#xff0c; 由于实际项目的差异性&#xff0c;往往需要修改element-ui的css样式&#xff0c; 这个时候就需要我们单独针对该页面进行修改样式。 二、方法&#xff1a; 使用::v-deep样式穿透进行修改即可 三、步骤…