elementui的组件upload，它的钩子方法on-change,file参数对象中没有url怎么办？

最新推荐文章于 2023-03-07 11:19:46 发布

原创最新推荐文章于 2023-03-07 11:19:46 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

web前端专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在没有原始URL的情况下，为文件创建URL的方法，以便进行预览和剪裁操作。通过使用JavaScript的URL.createObjectURL方法，可以将文件对象转换为一个临时的URL，从而实现在网页中显示和编辑图片的功能。

如图，这个file里没有url，有时候我们需要预览或者剪裁，这时候没有url就不行
在这里插入图片描述

那就我们自己创建一个url吧

onChange(file, fileList) {
      let url = URL.createObjectURL(file.raw)
      console.log(file, "onchange的输出");
      if (this.selectFile.uid !== file.uid) {
        if (this.isCrop) {
          this.innerVisible = true;
          this.cropOptions.img = url;
          this.selectFile = file;
          debugger;
        } else {
          this.$refs.upload.submit();
        }
      }
    },