vue element UI图片上传到fastDFS 前/后台实现图片显示

第一次开发element图片上传，到网上找了很多例子，感觉不全面，所以才写了这篇文章，希望帮助新手快速开发。

vue 使用element实现本地预览 最主要的是将图片路径转换为base64

VUE HTML

<el-form-item label="图片" prop="imgSrc" :label-width="formLabelWidth"> 
   <el-upload
    class="avatar-uploader"
	action="#" 
	v-model="dataForm.imgSrc"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:on-change="onchange"
	:before-upload="handleBeforeUpload"> 
	<i class="el-icon-plus"></i>
   </el-upload>
   <img v-if="imageUrl" :src="imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>  
</el-form-item>

JS

data() {
		return {
			 
			dataFormRules: {
				 
				imgSrc: [{ 
					required: true, message: '请上传图片', trigger: 'blur' 
				}]
			},
			 
			// 新增编辑界面数据
			dataForm: {
				id: 0,
				displayTypeName: '',
				monitorFactorOptions:'',
				imgSrc:'',
				remarks: ''
			},
			//图片
			imageUrl: '' 

		}
	},
methods: {
		// 显示编辑界面
		handleEdit: function (row) {
			this.editDialogVisible = true
			this.operation = false
			this.dataForm = Object.assign({}, row)
			this.imageUrl = row.imgSrc
		},
        handleAvatarSuccess(res, file) {
			this.imageUrl = URL.createObjectURL(file.raw); 
		},
		// 上传文件之前的方法
		handleBeforeUpload(file){		
			if(!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$message.error('上传图片格式为image/png, image/gif, image/jpg, image/jpeg的图片!');
				return isJPG
			}
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 2MB!');
				return isLt2M
			} 

			let fd = new FormData();
			fd.append('file',file);//传文件 
			//上传到后台
			imgUpload(fd).then(res => {  
				this.dataForm.imgSrc = res.data; 
				this.$message({ message: "上传成功", type: "success" });
			});					
		},
		//当上传图片后，调用onchange方法，获取图片本地路径
		onchange(file,fileList){
			var _this = this;
			var event = event || window.event;
			if(event.target.files!=undefined){
				var file = event.target.files[0];
				var reader = new FileReader(); 
				//转base64
				reader.onload = function(e) {
				_this.imageUrl = e.target.result //将图片路径赋值给src
				}
				reader.readAsDataURL(file);
			}
		}, 

}


// 上传图片
export function imgUpload(data) {
  return request({
    url: '/iot-business-app/displayType/imgUpload',
    method: 'post',
    data
  })
}

Java

 /**
     * 图片上传
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping(value="/imgUpload",method= RequestMethod.POST)
    @ResponseBody
    public Map imgUpload(@RequestParam("file") MultipartFile file) {
        String url=null;
        String ext_name=null;
        if(file!=null) {
            try {
                String s[]=(file.getOriginalFilename()).split("\\.");
                if(s.length==2) {
                    ext_name=s[1];
                }
                ClientGlobal.init("fdfs_client.conf");
                TrackerClient trackerClient = new TrackerClient();
                TrackerServer trackerServer = trackerClient.getConnection();
                StorageClient1 storageClient1 = new StorageClient1(trackerServer, null);
                url = "http://192.168.1.234:8888/"+storageClient1.upload_file1(file.getBytes(),ext_name,null);

//                url= "{url:\""+strs+"\",filename:\""+file.getOriginalFilename()+"\"}";
                System.out.println("========url========"+url);
            } catch (IOException | MyException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return null;
            }
        }
        Map<String ,Object> res=new HashedMap();
        res.put("code",20000);
        res.put("data",url);
        return res;
    }

Java配置文件fdfs_client.conf

connect_timeout = 2
network_timeout = 30
charset = UTF-8
http.tracker_http_port = 80
http.anti_steal_token = no
http.secret_key = FastDFS1234567890
tracker_server = 192.168.1.234:22122

效果展示：

新增上传效果

加载编辑页面显示图片效果：