pblUserManage/src/components/dialog/addBannerDialog.vue

<template>
	<div>
		<el-dialog
			:title="type == 'edit' ? '编辑Banner' : '添加Banner'"
			class="table"
			:visible.sync="show"
			:close-on-click-modal="false"
			width="800px"
			top="8vh"
		>
			<div v-loading="loading">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="图片标题">
						<el-input style="width: 300px" v-model="form.title"></el-input>
					</el-form-item>
					<el-form-item label="图片链接">
						<span v-show="true" @click="addUrlIcon('src')" style="cursor: pointer;">上传</span>
						<el-input style="width: 100%" v-model="form.src"></el-input>
					</el-form-item>

					<el-form-item label="图片跳转链接">
						<el-input style="width: 100%" v-model="form.url"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<!-- 按钮区域 -->
			<div slot="footer" class="el-dialog__footer">
				<el-button @click="close()">取 消</el-button>
				<el-button type="primary" @click="submit()">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import "@/common/aws-sdk-2.235.1.min.js";
export default {
	data() {
		return {
			show: false,
			loading: false,
			form: {
				src:"",
				title:"",
				url:""
			},
			type: null,
		};
	},
	methods: {
		open(data, type = "add") {
			if (data) {
				this.form = JSON.parse(JSON.stringify(data));
			} else {
				this.init();
			}
			this.type = type;
			this.show = true;
		},
		close() {
			this.show = false;
			this.init();
		},
		init() {
			this.form = {
				src:"",
				title:"",
				url:""
			};
		},
		submit() {
			if(!this.form.src)return this.$message.error("请完填写图片链接")
			this.$emit("success", {item:this.form,type:this.type});
		},
		async addUrlIcon(type = "src") {
			let _url = await this.uploadFile("image/*");
			if (_url) {
				this.form[type] = _url;
			} else {
				return console.log("无图片");
			}
		},
		uploadFile(accept = "*") {
			return new Promise((resolve) => {
				const input = document.createElement("input");
				input.type = "file";
				input.accept = accept;
				input.onchange = (event) => {
					const file = event.target.files[0];
					if (file) {
						let credentials = {
							accessKeyId: "AKIATLPEDU37QV5CHLMH",
							secretAccessKey: "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",
						}; //秘钥形式的登录上传
						window.AWS.config.update(credentials);
						window.AWS.config.region = "cn-northwest-1"; //设置区域
						let bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
						// let _name = file.name;
						// let size = file.size;
						let params = {
							Key:
								file.name.split(".")[0] +
								new Date().getTime() +
								"." +
								file.name.split(".")[file.name.split(".").length - 1],
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						let options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};

						bucket
							.upload(params, options)
							.on("httpUploadProgress", (evt) => {
								console.log(evt);
							})
							.send((err, data) => {
								if (err) {
									this.$message.error("上传失败");
									return resolve("");
								} else {
									return resolve(data.Location);
								}
							});
					} else {
						resolve("");
					}
				};
				input.click();
			});
		},
	},
};
</script>

<style scoped>
.table >>> .el-dialog__header {
	padding: 15px 20px;
	background: #454545;
}

.table >>> .el-dialog__title {
	color: #fff;
}
</style>