Javascript 尝试将文件对象作为属性传递给组件并获取空对象。我还想知道这是否安全？

我有一个通用的头像预览模式：

<avatar-update :img-file="avatarFile" :show="avatarModalShow" :img-url="url" @close="avatarModalShow = !avatarModalShow" :change-avatar="updateCrop" @destroyUrl="imgUrl = null"> </avatar-update>

当我在onFileChange函数中输入console.log文件常量时，我得到文件对象。但是，当我尝试在AvatarUpdate组件中输出{{imgFile}}属性时，我得到了一个空对象

我想知道这是否安全，文件数据是否可以在root和AvatarUpdate组件之间进行操作？还有什么东西阻止我将文件对象作为属性发送和输出吗？为什么它在AvataRuUpdate组件上给我一个空对象

对于这么多的问题，我很抱歉，但我将它们包含在一篇文章中的理由是，我认为可能存在一些安全功能，阻止我通过组件发送文件对象

编辑

这是我的头像地图组件：

<modal v-show="show" heading="Avatar Preview" @close="close">
  <div class="flex flex-col">

    <h4 class="text-blue-light mb-5">The avatar will be automatically cropped from the center.</h4>

      <div class="flex flex-col items-center">
          <img class="w-2/3" :src="imgUrl">
      </div>

      <p>{{imgFile}}</p>

      <button class="mt-4 h-10 self-end text-center bg-third-color hover:bg-secondary-color text-white font-bold py-2 px-4 rounded" v-on:click="submitAvatar()">Submit</button>
    </div>

用户控制器

用户控制器

在您的代码中，this.avatarFile=文件是一个从Blob对象继承的文件，如果打开浏览器检查器，它不能直接用于图像src，img:src的值是[object file]，显然该值不是您期望的值

你可以用它来达到目标

是另一种解决方案，但您必须小心处理内存管理。检查

PS：我建议先将文件对象转换为数据url或对象url，然后将数据url或对象url传递给子组件。直接传递文件对象可能会遇到反应性问题

一个使用FileReader的简单演示：

Vue.config.productionTip=false Vue.组件“img-preview”{ 模板：` `, 道具：['imageBlob'] } 新Vue{ el:“应用程序”， 资料{ 返回{ imageObj:null } }, 方法：{ onFileChange:functionev{ const selectFile=ev.target.files[0] let reader=新文件读取器 reader.readAsDataURLselectFile reader.addEventListener'load'，=>{ this.imageObj=reader.result //console.log'select image'，reader.result }，错 }, } }

---

嗨，谢谢你的回答。我关心的一个问题是在后端将文件验证为映像。我打算使用this.avatarFile尝试返回其他数据，如文件名和类型，并避免将blob作为属性传递。我通常担心有人会更改类型prop，这会使它通过后端验证。可能是一个愚蠢的担忧。不确定你的目标是什么。可能会检查，然后你可以定义其他道具传递文件名或其他。我做了编辑。希望它能更好地解释我想要实现的目标。谢谢您的帮助。@user3325126，第三个演示演示了如何将文件对象传递给组件。您可以将submitAvatar添加到该演示中，然后重试。感谢您的患者。

onFileChange: function(e) {
    const file = e.target.files[0];
    this.url = URL.createObjectURL(file);
    this.updateCrop = !this.updateCrop;
    this.avatarModalShow = !this.avatarModalShow;
    this.avatarFile = file;
},

<modal v-show="show" heading="Avatar Preview" @close="close">
  <div class="flex flex-col">

    <h4 class="text-blue-light mb-5">The avatar will be automatically cropped from the center.</h4>

      <div class="flex flex-col items-center">
          <img class="w-2/3" :src="imgUrl">
      </div>

      <p>{{imgFile}}</p>

      <button class="mt-4 h-10 self-end text-center bg-third-color hover:bg-secondary-color text-white font-bold py-2 px-4 rounded" v-on:click="submitAvatar()">Submit</button>
    </div>

<script>

    export default {
        props: ['show','imgUrl','changeAvatar','imgFile'],
        data() {
          return {
            image: null,
            message: null
          }
        },
        methods: {
            close: function(){
              this.$emit('close');
            },

            submitAvatar: function(){
              console.log(file);
              axios({
                  method: 'POST',
                  url: '/profile/avatar',
                  data: {},
              }).then(function (response) {


              this.message = "Your avatar has been submitted";   

              }.bind(this))
              .catch(function (error) {
                  console.log(error);
              });
            }
        }
    }
</script>

submitAvatar: function(){
  //Change here!
  var data = new FormData()
    var file = this.imgFile;
    data.append('avatar', file);

  axios({
      method: 'POST',
      url: '/profile/avatar',
      data: data,
  }).then(function (response) {


  this.message = "Your avatar has been submitted";   

  }.bind(this))
  .catch(function (error) {
      console.log(error);
  });
}

public function avatar(Request $request)
{
    return $request->hasFile('avatar');
}