图片预览问题,困扰了好几天 求助!

项目中遇到的图片预览问题,本地开发测试好用,

发布到服务器上就报错了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映射,但是还是没有显示出来,感觉方向是对的

问题已经解决了 测试服务器端好用的,上面的报错是因为我打开了本地上传的图片,哭了这脑子

后台的问题,去别的区提问吧,