项目中遇到的图片预览问题,本地开发测试好用,
发布到服务器上就报错了Not allowed to load local resource: blob:http://localhost:8001XXXXX,我采用的是存blob的url方式在本地预览回显,但是服务器报错以后再用本地环境打开原本好用的图片也坏掉了,同样的方式在服务器上上传新图片后预览也不行,生生的blob看起来还不太完整
你方便贴上代码块看看吗
getUrl() {
if (this.attachmentId === '') {
this.attachmentId = this.UTIL_.getUUID()
}
let reg=new RegExp('/','g')//g代表全部
let newMsg=this.localUrl.replace(reg,'&');
return`/sys/sysfile/auto/${this.attachmentId}/${newMsg}`
},
uploadOverrun: function() {
this.$message({
type: 'error',
message: '上传文件个数超出限制!最多上传5张图片!'
})
},
changeUpload: function(file, fileList) {
this.fileList = fileList
var URL = null;
if (window.createObjectURL != undefined) {
// basic
URL = window.createObjectURL(file.raw);
} else if (window.URL != undefined) {
// mozilla(firefox)
URL = window.URL.createObjectURL(file.raw);
} else if (window.webkitURL != undefined) {
// webkit or chrome
URL = window.webkitURL.createObjectURL(file.raw);
}
// 转换后的地址为 blob:http://xxx/7bf54338-74bb-47b9-9a7f-7a7093c716b5
this.localUrl = URL;
this.$refs.upload.submit()
this.fileRaw=file.raw
},
submitUpload: function(content) {
const formData = new FormData()
formData.append('file', content.file)
const config = {
'Content-Type': 'multipart/form-data'
}
this.$http.post(this.$http.adornUrl(this.getUrl()), formData, config)
.then(({ data }) => {
this.$refs.upload.clearFiles()
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500
})
this.getDataList()
} else {
this.$message.error(data.msg)
}
})
},
submitAssess: function() {
this.$refs.upload.submit()
},
viewFile() {
const { href } = this.$router.resolve({
name: 'viewfile',
params: {
formid: this.pattachmentId
}
})
var win = window.open(href, 'file-viewer', 'height=800, width=1200, location=no')
setTimeout(function() { win.document.title = '生产管理-文件查看器' }, 500)
},
viewImg(row){
this.$nextTick(() => {
// this.showImg(this.fileRaw);
this.showImg(row);
});
},
showImg (row) {
this.visibleImg = true;
this.localUrl = row.remarks;
this.isShowImgUpload = true;//呈现本地预览组件
},
}
你开在服务器上,url还用localhost当然访问不了,这个道理就是你图片传到你的电脑上,然后项目丢到服务器上跑,他怎么知道你图片原本在哪
然后新传的图片有问题,是后端有问题吧,服务器如果是linux的,没有c盘d盘这些的,会不会是保存路径有问题导致没存下来
进行了一些错误排查,路径存ip+uuid+文件名,通过nginx映射,但是还是没有显示出来,感觉方向是对的
问题已经解决了 测试服务器端好用的,上面的报错是因为我打开了本地上传的图片,哭了这脑子
后台的问题,去别的区提问吧,