1:、需求:之前的圖片上傳接口是,前端上傳圖片給后端,后端返回一個存放圖片的web路徑,現在后端出問題,返回的web路徑無法使用,需要前端展示本地的文件
2、思路:把當前選擇的圖片文件轉化成base64格式用backgroundImage來展示
3、實現:
fileListChange(file) { let oFReader = new FileReader() oFReader.readAsDataURL(file.raw) //讀取指定文件 let _this = this oFReader.onloadend = e => { //當文件讀取完成時觸發該loadend事件,無論成功與否。 let src = e.target.result //轉化為base64 _this.$nextTick(() => { let dom = _this.$refs.editImg dom.style.backgroundImage = `url(${src})` //用backgroundImage展示base64 }) } },