element-ui Upload 上传组件

最新推荐文章于 2024-10-18 17:23:02 发布

positive_qrq

最新推荐文章于 2024-10-18 17:23:02 发布

阅读量111

点赞数

分类专栏： Element-UI应用文章标签： html vue.js javascript css

本文链接：https://blog.csdn.net/positive_qrq/article/details/117773134

版权

Element-UI应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

element-ui Upload 上传组件

自定义一次上传多文件且可以预览图片

弊端：可能上传的文件比较多或单个文件大造成上传失败，需要限制上传文件大小及上传文件个数
优点：可以一次上传多个文件，且不会上传到服务器垃圾文件

<template>
	<div>
		<el-upload
		   ref="upload"
		   action=""
		   multiple
		   :before-upload="beforeUpload"
		   :http-request="httpRequest"
		 >
		  <div class="eladmin-upload"><i class="el-icon-upload" /> 选择文件</div>
		</el-upload>
		<img v-for="(url, i) in imgList" :src="url" :key="i">
	</div>
</template>

<script>
export default {
  data() {
  	return {
  		imgList:[]
  	}
  },
  methods: {
  	beforeUpload(file) {
      let isLt2M = true
      isLt2M = file.size / 1024 / 1024 < 100
      if (!isLt2M) {
        this.loading = false
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isLt2M 
    },
	httpRequest(params) {
		const file = params.file;
		const { name, type, uid } = file
		const reader = new FileReader();
		reader.readAsDataURL(file);
		const self = this
		reader.onload = function() {
			console.log(reader.result) //将文件转为base64实现本地预览
			self.imgList.push(reader.result)
		}
	},
	submit() {//提交imgList到后端
		 
	}
  }
  
}
<script>