vue中文件上传通过axios把文件传入到后台

最新推荐文章于 2024-06-06 14:35:00 发布

小 BO

最新推荐文章于 2024-06-06 14:35:00 发布

阅读量741

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_48700164/article/details/125291496

版权

<template>
	<div>
		<div class="bigImgupdate-div" ref="Pname" @click="toGetImg">
			<img class="bigImgupdate" @click="toGetImg"  :src=valueUrl v-if="valueUrl">
		</div>
		<div>
			<p>照片名称:{{Pname}}</p>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import store from '../store/index.js'
	let inputElement = null
	export default {
		props: ['gids'],
		data() {
			return {
				valueUrl: '',
				valueBase: '',
				Pname: '',
				test: '子组件里的值',
			}
		},
		computed: {

		},
		mounted() {

		},
		components: {

		},
		methods: {
			toGetImg() {
				if (inputElement === null) {
					// 生成文件上传的控件
					inputElement = document.createElement('input')
					inputElement.setAttribute('type', 'file')
					inputElement.style.display = 'none'
					if (window.addEventListener) {
						inputElement.addEventListener('change', this.uploadFile, false)
					} else {
						inputElement.attachEvent('onchange', this.uploadFile)
					}
					document.body.appendChild(inputElement)
				}
				inputElement.click()

			},
			uploadFile(el) {
				if (el && el.target && el.target.files && el.target.files.length > 0) {
					const files = el.target.files[0]
					const isLt2M = files.size / 1024 / 1024 < 2
					const size = files.size / 1024 / 1024
					// 判断上传文件的大小
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!')
					} else if (files.type.indexOf('image') === -1) { //如果不是图片格式
						// this.$dialog.toast({ mes: '请选择图片文件' });
						this.$message.error('请选择图片文件');
					} else {
						const that = this;
						const reader = new FileReader(); // 创建读取文件对象
						reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件
						reader.onload = function() { // 文件读取完成后
							//读取完成后，将结果赋值给img的src
							this.valueBase = this.result.replace(/^data:image\/\w+;base64,/, "");
							that.valueUrl = 'data:image/png;base64,' + this.valueBase;
							// 数据传到后台
							const formData = new FormData()
							formData.append('file', files); // 可以传到后台的数据
							that.Pname = files.name;
							that.$emit("onclickupload", files.name);
							axios.post("api/limited/upload", {
									photo: this.valueBase,
									name: files.name,
								}, {
									headers: {
										tokenStr: store.state.token,
									}
								})
								.then(res => {
									if (res.data.code == 201) {
										that.$message({
											message: '文件已传输成功',
											type: 'success'
										});
									} else if (res.data.code == 202) {
										that.$message({
											type: 'info',
											message: '文件传输失败'
										});
									}

								})
								.catch(err => {
									console.log("传输失败", err)
								})
						};
					}
				}
			},
		},
		beforeDestroy() {
			if (inputElement) {
				if (window.addEventListener) {
					inputElement.removeEventListener('change', this.onGetLocalFile, false)
				} else {
					inputElement.detachEvent('onchange', this.onGetLocalFile)
				}
				document.body.removeChild(inputElement)
				inputElement = null
				/* console.log('========inputelement destroy') */
			}
		}

	}
</script>

<style>
	.bigImgupdate-div {
		width: 100px;
		height: 100px;
		overflow: hidden;
		border: 1px solid #ddd;
	}

	.bigImgupdate {
		display: block;
		width: 100px;
		height: 100px;
	}
</style>