Elementui 上传文件图片功能

 这个是我根据我公司的需求去做的一个操作,有很多不全的地方,还需你们自己加,我公司的代码比较老,使用layui做的弹出层做的,所以需要去地址栏截取参数

<div id="app">
    <el-upload
		  class="upload-demo"
		  action
		  :accept="accept"
		  :on-preview="handlePreview"
		  :on-remove="handleRemove"
		  :on-progress="uploadSectionFile"
		  :before-upload="beforeUpload"
		  :file-list="fileList"
		  :limit="limit"
		  :on-exceed="onExceed"
		  :list-type="picture">
		  <el-button size="small" type="primary">点击上传</el-button>
		  <div slot="tip" class="el-upload__tip">文件不能超过{{Size}}M</div>
	</el-upload>
</div>

 

var vm=new Vue({
	el:"#app",
	data() {
		return {
			fileList:[],
			limit:5,
			fileType:1,
			accept:'image/*',
			Size:15,
			imgId:[],
			url:r.api + '/common/upload/files',
			picture:'picture'
		}
	},
	created() {
		/**
		 * 上传时候携带的参数有默认的
		 * @param {limit}  = [上传数量] 
		 * @param {fileType}  = [上传的种类] //后续可加视频等
		 * @param {size}  = [上传的文件大小] 
		 */
		this.limit=getUrlValue()["limit"]?getUrlValue()["limit"]*1:5
		this.fileType=getUrlValue()["fileType"]?getUrlValue()["fileType"]*1:1
		this.accept=this.fileType==1?'image/*':'application/msword,application/pdf,text/plain,application/vnd.ms-excel'
		this.Size=getUrlValue()["size"]?getUrlValue()["size"]*1:15
		this.picture=this.fileType==1?'picture':'text'
	},
	methods:{
		handleRemove(file, fileList) {
			let index =null
			this.fileList.forEach((item,i)=>{
				if(file.uid==item.uid){
					index=i
				}
			})
			this.fileList=fileList
			console.log(index)
			if(index!=null){
				this.imgId.splice(index,1)
			}
			console.log(this.imgId)
		},
		handlePreview(file) {
			console.log(file);
		},
		beforeUpload(file){
			let show =true
			if(file.size>this.Size*1024*1024){
				utils.dialog.alert("文件大小以超出设定!")
				return show=false
			}
			this.fileList.forEach(item=>{
				if(file.name==item.name){
					show=false
					utils.dialog.alert("请勿重复上传!")
				}
			})
			return show
		},
		uploadSectionFile(event, file, fileList){
			var _this=this
			this.fileList=fileList
			let formdata=new FormData()
			if(this.fileType==1){
				const fileF = file.raw;
				const fileName=file.name
				const fileType = fileF.type;
				const reader = new FileReader();
				reader.readAsDataURL(fileF);
				reader.onload = function() {
					const image = new Image();
					image.src = this.result;
					image.onload = function(e) {
						const canvas = document.createElement("canvas");
						let context = canvas.getContext("2d");
						// 图片原始尺寸
						const originWidth = this.width;
						const originHeight = this.height;
						let targetWidth = originWidth;
						let targetHeight = originHeight;
						// canvas对图片进行缩放
						canvas.width = targetWidth;
						canvas.height = targetHeight;
						// 清除画布
						context.clearRect(0, 0, targetWidth, targetHeight);
						// 图片压缩
						context.drawImage(image, 0, 0, targetWidth, targetHeight);
						const type = "image/jpeg";
						//将canvas元素中的图像转变为DataURL
						const dataurl = canvas.toDataURL(type,0.2);
						//抽取DataURL中的数据部分，从Base64格式转换为二进制格式
						// const bin = atob(dataurl.split(",")[1]);
						//创建空的Uint8Array
						// const buffer = new Uint8Array(bin.length);
						let arr = dataurl.split(','),
						    mime = arr[0].match(/:(.*?);/)[1],
						    bstr = atob(arr[1]),
						    n = bstr.length,
						    u8arr = new Uint8Array(n);
						while (n--) {
						    u8arr[n] = bstr.charCodeAt(n);
						}
						let files = new File([u8arr], fileName, {type: mime});
						files.lastModifiedDate = new Date();
						formdata.append("name",fileName)
						formdata.append("file",files)
						formdata.append("type",1)
						_this.setUpdata(formdata)
					};
				};
			}else{
				formdata.append("name",file.name)
				formdata.append("file",file.raw)
				formdata.append("type",1)
				_this.setUpdata(formdata)
			}
		},
		setUpdata(formdata){
			var _this=this
			$.ajax({
				url: this.url,
				type: 'POST',
				data: formdata,
				headers: {"Authorization": utils.getToken()},
				processData: false,
				contentType: false,
				dataType: 'json',
				success:function (res) {
					if(res.data){
						_this.imgId.push(res.data.fileId)
					}
				}
				,error:function (res) {
					console.log(res)
				}
			});
		},
		onExceed(files, fileList){
			utils.dialog.alert("已超过数量限制!")
		}
	}
})