本地上传并预览 ---element Ui

图片类型上传的两种方式:

	1--前端调用接口上传到oss,
    2--本地转base64实现预览,再以formData形式提交

这里只简单解释下第二种:

html:


      
	        
	          	 
	        
	        
	         	  
	        	
	        
          		 
	        
	        
		          
			            
			            
		          
	        
	        
		          
			            
			            
			            
		          
	        
      
      
        取 消
        确 定
      
    

js:

// 上传变化监听   ------ 这里是重点 图片转base
      onchange(file,fileList){
	        var _this = this;
	        var event = event || window.event;
	        if(event.target.files){
		          var file = event.target.files['0'];
		          var reader = new FileReader();
		          reader.onload = function(e) {    //转base64
		            	_this.imageUrl = e.target.result
			            if(!_this.errorflag){    // 如果报错 不预览
			            	  _this.imageUrl = ''
			            }
		            	_this.errorflag = true
		          }
		          reader.readAsDataURL(file);
	        }
      },

// 新增编辑保存   --- 将文本和图片一起 以formData形式提交保存
      doAddHandler () {
	        const form = new FormData();
	        if(this.editeFile){
	          	form.append("file", this.editeFile);
	        }    
	        form.append("username", this.addForm.username);
	        form.append("fullname", this.addForm.fullname);
	        form.append("phone", this.addForm.phone || '');
     		this.formdata = form
	        if(this.addEditType == 'add'){
	          	this.$refs.addEditeForm.validate((valid) => {
		            if(valid){
			              userCreate(this.formdata).then(res =>{
				                if(res.code == 200){
					                  this.$message.success('保存成功');
					                  this.dialogVisible = false
				                }
			              })
	            	 }
	         	 })
	        }
      }

你可能感兴趣的:(vue-个人杂记)