elmentUI文件上传 el-upload 文件上传小笔记

<el-upload multiple class="upload-demo" ref="upload" 
	   action=""  
       accept=".jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx"
       :before-upload="beforeUpload" 
       :on-preview="handlePreview"
       :before-remove="handleBeforeRemove" 
       :on-remove="handleRemove" 
       :file-list="fileList" 
       :auto-upload="true">
       <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">可以上传文档，表格，pdf,图片等等</div>
 </el-upload>

<script>
	  export default {
	 //影像件的上传
	   data() {
	   		return {
	   			fileList:[];
	   		}
	   },
		   methods:{
			beforeUpload(file) {
		        console.log(file);
		        let param = new FormData(); //创建form对象
		        param.append('file', file); //通过append向form对象添加数据
		        param.append('businessId', this.addForm.agreementCode); //通过append向form对象添加数据
		        param.append('documentClass', 'agreement'); //通过append向form对象添加数据
		        param.append('documentType', '000'); //通过append向form对象添加数据 
		        let config = {
		          headers: {
		            'Content-Type': 'multipart/form-data'
		          }
		        }; //添加请求头
		        var that = this;
		        axios.post(`${rootPath}/document/upload`, param, config)
		          .then(response => {
		            if (response.data.status == '1') {
		              //把新增的图片放在列表中  
		              that.fileList.push({
		                "url": response.data.data[0].ossUrl,
		                "ossAbsPath": response.data.data[0].ossAbsPath,
		                "name": response.data.data[0].documentName,
		                "id": response.data.data[0].id
		              }); 
		            } else {  
		            } 
	      	 });
	      },
	      //删除文件之前,返回的是true,页面上该文件删除，返回的是false,页面上该文件没删除
	      handleBeforeRemove(file, fileList) { 
	        var param = {
	          "id": file.id,
	        };
	        var that = this;
	        var flag = false;
	        try {
	          axios.post(`${rootPath}/document/delete`, param)
	            .then(response => {
	              if (response.data.status == '1') { 
	                //在fileList里面去掉当前删除的这个文件 
	                for (var i = 0; i < that.fileList.length; i++) {
	                  if (that.fileList[i].id == file.id) {
	                    that.fileList.splice(i, 1);
	                  }
	                }
	                flag = true;
	                return flag;
	              } else { 
	                flag = false;
	                return flag;
	              }
	            }); 
	        } catch (err) { 
	          flag = false;
	          return flag;
	        }
	      },
	     //文件下载
	    handlePreview(file) {
	        console.log(file);   
	        let param = new FormData(); //创建form对象
	        param.append('path', file.ossAbsPath); //通过append向form对象添加数据
	        param.append('isOnline', 'true'); //通过append向form对象添加数据 
	        try {
	          axios.post(`${rootPath}/document/download`, param,{
	            responseType: 'blob'
	          }).then(res => {
	               if (!res) {
	                return
	              }
	              const content = res.data;
	              const blob = new Blob([content]);
	              const fileName = file.name; 
	              if ('download' in document.createElement('a')) { // 非IE下载
	                const elink = document.createElement('a');
	                elink.download = fileName;
	                elink.style.display = 'none';
	                elink.href = URL.createObjectURL(blob);
	                document.body.appendChild(elink);
	                elink.click();
	                URL.revokeObjectURL(elink.href); // 释放URL 对象
	               document.body.removeChild(elink);
	              } else { // IE10+下载
	                 navigator.msSaveBlob(blob, fileName);
	              } 
	            }); 
	        } catch(err) {
	        
	        }
	      }，
		} 
	}
</script>