hotWaterManagerWeb/src/components/ad/ad.vue

<template>
	<div>
		<el-row>
			<el-col :span="24" class="first-row">
				<div class="tag">广告管理</div>
			</el-col>
		</el-row>
		<hr style="background-color: #CCCCCC;height: 1px;border: 0;">
		<el-row>
			<el-col :span="12" class="third-row">
				<el-link type="danger">{{send_url}}</el-link>
				<el-upload ref="upload_send" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
					action="#" :multiple="false">
					<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="send_ad">上传到服务器
					</el-button>
					<div slot="tip" class="el-upload__tip">提示：仅允许上传多1个".jpg"文件，且不超过500kb</div>
				</el-upload>
			</el-col>
			<el-col :span="12" class="third-row">
				<el-link type="danger">{{modify_url}}</el-link>
				<el-upload ref="upload_modi" :limit="1" :auto-upload="false" list-type="picture" accept=".jpg"
					action="#" :multiple="false">
					<el-button slot="trigger" size="small" type="primary">选取图片文件</el-button>
					<el-button style="margin-left: 10px;" size="small" type="success" @click="modify_ad">上传到服务器
					</el-button>
					<div slot="tip" class="el-upload__tip">只能上传jpg文件，且不超过500kb</div>
				</el-upload>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				send_url: '上传成功显示URL',
				modify_url: '修改成功显示URL'
			}
		},
		methods: {
			/**
			 * 上传广告图片
			 */
			send_ad() {
				var _this = this
				let file = this.$refs.upload_send.uploadFiles.pop().raw; //这里获取上传的文件对象
				let formData = new FormData();
				formData.append("myFile", file);
				formData.append("url_name", '水电广告');
				formData.append("remark", '备注');
				this.$axios.post('/shuidian/HotWaters/adverthimage.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							_this.$message.success(res.data.message);
							_this.send_url = res.data.url;
						} else {
							_this.$message.warning(res.data.messag);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【上传图片】请求异常: ' + err);
					})
			},
			/**
			 * 修改广告图片
			 */
			modify_ad() {
				var _this = this
				let file = this.$refs.upload_modi.uploadFiles.pop().raw; //这里获取上传的文件对象
				let formData = new FormData();
				formData.append("myFile", file);
				formData.append("url_name", '修改水电广告');
				formData.append("remark", '备注修改图片');
				formData.append("id", 1);
				this.$axios.post('/shuidian/HotWaters/adverth_uimage.action', formData)
					.then(res => {
						// console.log(res.data);
						if (res.data.code == 200) {
							_this.$message.success(res.data.message);
							_this.modify_url = res.data.url;
						} else {
							_this.$message.warning(res.data.messag);
						}
					})
					.catch(err => {
						// console.log(err);
						_this.$message.error('【修改图片】请求异常: ' + err);
					})
			}
		}
	}
</script>

<style scoped>
	@import url("ad.css");
</style>