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

第一次开发element图片上传，到网上找了很多例子，感觉不全面，所以才写了这篇文章，希望帮助新手快速开发。
vue 使用element实现本地预览最主要的是将图片路径转换为base64
VUE HTML

文章图片

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 = https://www.it610.com/article/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="https://www.it610.com/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 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

效果展示：
新增上传效果