vue上传流文件

最新推荐文章于 2024-08-14 15:51:24 发布

Zh.冠军

最新推荐文章于 2024-08-14 15:51:24 发布

阅读量3.6k

点赞数 1

文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/weixin_38673922/article/details/105992886

版权

在这里插入图片描述

	<el-upload
	 class="avatar-uploader"
	 action="#"
	 :show-file-list="false"
	 :http-request="httpRequest">
	   <p><el-button type="primary" size="medium" class="uploadBtn">选择文档</el-button></p>
	</el-upload>

//文件转base64
	getBase64(file) {
		console.log(file)
		return new Promise((resolve, reject) => {
			let reader = new FileReader();
			let fileResult = "";
			reader.readAsDataURL(file);　　　　　 //开始转
			reader.onload = function() {
				fileResult = reader.result;
			};　　　　　 //转 失败
			reader.onerror = function(error) {
				reject(error);
			};　　　　　 //转 结束  咱就 resolve 出去
			reader.onloadend = function() {
				resolve(fileResult);
			};
		});
	},

	httpRequest(data) {　
		var _this = this;
		this.fileName = data.file.name;		//文件名
		console.log(data.file.type)			//文件类型
		
		//限制上传文件类型
		var docxType =  'application/vnd.openxmlformats-officedocument.wordprocessingml.document';		//docx后缀	
		var txtType = 'text/plain'				//txt后缀
		var docType =  "application/msword"		//doc后缀
		
		if(data.file.type == docxType || data.file.type == txtType || data.file.type == docType){
			console.log(docxType);
			this.getBase64(data.file).then(resBase64 => {
				this.fileBase64 = resBase64.split(',')[1]　　 	//直接拿到base64信息
				//上传文件接口
		  		this.$http.post('/API/FileAPI/UploadFileMethod',{
		  			base64Filecontent:resBase64.split(',')[1],
					catalog:_this.catalog,
					filename:data.file.name
		  		})
		      	.then(function(res){
		      		console.log(res)
		      		if(res.status == 200){
		      		}else{}
					})
		    	.catch(error =>{
		        	
			    })						
			})
			
		}else{
			this.$message.error("上传文件只能是 DOCX DOC TXT 格式!");
		}
	},