Javascript 如何解决此错误&引用；TypeError:无法读取属性'；文件'；“未定义”的定义；

我正在创建一个网站，用户可以发布他们想要销售的任何产品。它包括产品的标题、图片和说明。当我尝试将数据上传到firebase存储时，它工作不正常，并显示“TypeError:无法读取未定义的属性“文件” 我应该修复哪个部分来解决这个问题

<template>
  <div class="productimageFile">
   <div>
       <label for="add-title">タイトル</label>
       <input type='text' class="add-product-title" v-model="title">
   </div>
   <div>
      <label for="add-picture">画像</label>
      <div class="col-md-9">
        <div class="customFile">
          <input @change="photoFile" id="itemImage" type="file" accept=".jpg,.jpeg,.png,.gif, image/jpeg,image/png,image/gif"
            class="custom-file-input" required>
          <label id="add-item-image-label" class="custom-file-label" for="add-item-image">ファイルを選択</label>
        </div>
      </div>
   </div>
   <div>
       <label for="add-description">説明</label>
       <textarea class="discription" v-model="productDescription">説明記入欄</textarea>
   </div>
   <div>
       <button @click='itemCreate' type="submmit" value="送信"></button>
   </div>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'ItemCreate',
  data: function () {
    return {
      title: '',
      itemImage: '',
      productDescription: ''
    }
  },
  methods: {
    photoFile: function (e) {
      e.preventDefault()
      let files = e.target.files
      this.productimageFile = files[0]

      console.log(this.productimageFileductimage)
    },
    itemCreate: function () {
    // 商品タイトル
      const title = this.title
      const productDescription = this.productDescription
      const itemImage = this.itemImage
      const { files } = itemImage[0]

      if (files.length === 0) {
      // ファイルが選択されていないなら何もしない
        return
      }

      const file = files[0] // 表紙画像ファイル
      const filename = file.name // 画像ファイル名
      const itemImageLocation = `item-images/${filename}` // 画像ファイルのアップロード先

      // TODO: 書籍データを保存する
      firebase
        .storage()
        .ref(itemImageLocation)
        .put(file) // Storageへファイルアップロードを実行
        .then(() => {
        // Storageへのアップロードに成功したら、Realtime Databaseに書籍データを保存する
          const itemData = {
            title,
            itemImageLocation,
            productDescription,
            createdAt: firebase.database.ServerValue.TIMESTAMP
          }
          return firebase
            .database()
            .ref('items')
            .push(itemData)
        })
    }
  }

}
</script>

タイトル
画像
ファイルを選択
説明
説明記入欄
从“firebase”导入firebase
导出默认值{
名称：“ItemCreate”，
数据：函数（）{
返回{
标题：“”，
itemImage:“”，
产品说明：“”
}
},
方法：{
照片文件：功能（e）{
e、 预防默认值（）
让files=e.target.files
this.productimageFile=文件[0]
console.log（this.productImageFileDutimage）
},
itemCreate:函数（）{
// 商品タイトル
const title=this.title
const productDescription=this.productDescription
const itemImage=this.itemImage
const{files}=itemImage[0]
如果（files.length==0）{
// ファイルが選択されていないなら何もしない
返回
}
常量文件=文件[0]//表紙画像ファイル
const filename=file.name//画像ファイル名
const itemImageLocation=`item images/${filename}`//画像ファイルのアップロード先
//待办事项：書籍データを保存する
火基
.储存
.ref（itemImageLocation）
.put（文件）//存储へファイルアップロードを実行
.然后（（）=>{
//储藏へのアップロードに成功したら、实时数据库に書籍データを保存する
const itemData={
标题
项目图像位置，
产品说明，
createdAt:firebase.database.ServerValue.TIMESTAMP
}
返回火基
.数据库（）
.ref（“项目”）
.push（itemData）
})
}
}
}

---

我是新来的，所以如果我做错了什么，请告诉我。非常感谢。

文件是局部变量，请将其更改为全局变量

例如：

<template>
  <div class="productimageFile">
   <div>
       <label for="add-title">タイトル</label>
       <input type='text' class="add-product-title" v-model="title">
   </div>
   <div>
      <label for="add-picture">画像</label>
      <div class="col-md-9">
        <div class="customFile">
          <input @change="photoFile" id="itemImage" type="file" accept=".jpg,.jpeg,.png,.gif, image/jpeg,image/png,image/gif"
            class="custom-file-input" required>
          <label id="add-item-image-label" class="custom-file-label" for="add-item-image">ファイルを選択</label>
        </div>
      </div>
   </div>
   <div>
       <label for="add-description">説明</label>
       <textarea class="discription" v-model="productDescription">説明記入欄</textarea>
   </div>
   <div>
       <button @click='itemCreate' type="submmit" value="送信"></button>
   </div>
  </div>
</template>

<script>
import firebase from 'firebase'

var { files } = null

export default {
  name: 'ItemCreate',
  data: function () {
    return {
      title: '',
      itemImage: '',
      productDescription: ''
    }
  },
  methods: {
    photoFile: function (e) {
      e.preventDefault()
      let files2 = e.target.files
      this.productimageFile = files2[0]

      console.log(this.productimageFileductimage)
    },
    itemCreate: function () {
    // 商品タイトル
      const title = this.title
      const productDescription = this.productDescription
      const itemImage = this.itemImage
      { files } = itemImage[0]

      if (files.length === 0) {
      // ファイルが選択されていないなら何もしない
        return
      }

      const file = files[0] // 表紙画像ファイル
      const filename = file.name // 画像ファイル名
      const itemImageLocation = `item-images/${filename}` // 画像ファイルのアップロード先

      // TODO: 書籍データを保存する
      firebase
        .storage()
        .ref(itemImageLocation)
        .put(file) // Storageへファイルアップロードを実行
        .then(() => {
        // Storageへのアップロードに成功したら、Realtime Databaseに書籍データを保存する
          const itemData = {
            title,
            itemImageLocation,
            productDescription,
            createdAt: firebase.database.ServerValue.TIMESTAMP
          }
          return firebase
            .database()
            .ref('items')
            .push(itemData)
        })
    }
  }

タイトル
画像
ファイルを選択
説明
説明記入欄
从“firebase”导入firebase
var{files}=null
导出默认值{
名称：“ItemCreate”，
数据：函数（）{
返回{
标题：“”，
itemImage:“”，
产品说明：“”
}
},
方法：{
照片文件：功能（e）{
e、 预防默认值（）
让files2=e.target.files
this.productimageFile=files2[0]
console.log（this.productImageFileDutimage）
},
itemCreate:函数（）{
// 商品タイトル
const title=this.title
const productDescription=this.productDescription
const itemImage=this.itemImage
{files}=itemImage[0]
如果（files.length==0）{
// ファイルが選択されていないなら何もしない
返回
}
常量文件=文件[0]//表紙画像ファイル
const filename=file.name//画像ファイル名
const itemImageLocation=`item images/${filename}`//画像ファイルのアップロード先
//待办事项：書籍データを保存する
火基
.储存
.ref（itemImageLocation）
.put（文件）//存储へファイルアップロードを実行
.然后（（）=>{
//储藏へのアップロードに成功したら、实时数据库に書籍データを保存する
const itemData={
标题
项目图像位置，
产品说明，
createdAt:firebase.database.ServerValue.TIMESTAMP
}
返回火基
.数据库（）
.ref（“项目”）
.push（itemData）
})
}
}

---

编辑：您还应该使用命名约定，有两个不同的变量名为“文件”，这也可能是错误的原因。通过按照对象的行为或性质命名对象来保存您自己的错误。

文件是局部变量，请将其更改为全局变量

例如：

<template>
  <div class="productimageFile">
   <div>
       <label for="add-title">タイトル</label>
       <input type='text' class="add-product-title" v-model="title">
   </div>
   <div>
      <label for="add-picture">画像</label>
      <div class="col-md-9">
        <div class="customFile">
          <input @change="photoFile" id="itemImage" type="file" accept=".jpg,.jpeg,.png,.gif, image/jpeg,image/png,image/gif"
            class="custom-file-input" required>
          <label id="add-item-image-label" class="custom-file-label" for="add-item-image">ファイルを選択</label>
        </div>
      </div>
   </div>
   <div>
       <label for="add-description">説明</label>
       <textarea class="discription" v-model="productDescription">説明記入欄</textarea>
   </div>
   <div>
       <button @click='itemCreate' type="submmit" value="送信"></button>
   </div>
  </div>
</template>

<script>
import firebase from 'firebase'

var { files } = null

export default {
  name: 'ItemCreate',
  data: function () {
    return {
      title: '',
      itemImage: '',
      productDescription: ''
    }
  },
  methods: {
    photoFile: function (e) {
      e.preventDefault()
      let files2 = e.target.files
      this.productimageFile = files2[0]

      console.log(this.productimageFileductimage)
    },
    itemCreate: function () {
    // 商品タイトル
      const title = this.title
      const productDescription = this.productDescription
      const itemImage = this.itemImage
      { files } = itemImage[0]

      if (files.length === 0) {
      // ファイルが選択されていないなら何もしない
        return
      }

      const file = files[0] // 表紙画像ファイル
      const filename = file.name // 画像ファイル名
      const itemImageLocation = `item-images/${filename}` // 画像ファイルのアップロード先

      // TODO: 書籍データを保存する
      firebase
        .storage()
        .ref(itemImageLocation)
        .put(file) // Storageへファイルアップロードを実行
        .then(() => {
        // Storageへのアップロードに成功したら、Realtime Databaseに書籍データを保存する
          const itemData = {
            title,
            itemImageLocation,
            productDescription,
            createdAt: firebase.database.ServerValue.TIMESTAMP
          }
          return firebase
            .database()
            .ref('items')
            .push(itemData)
        })
    }
  }

タイトル
画像
ファイルを選択
説明
説明記入欄
从“firebase”导入firebase
var{files}=null
导出默认值{
名称：“ItemCreate”，
数据：函数（）{
返回{
标题：“”，
itemImage:“”，
产品说明：“”
}
},
方法：{
照片文件：功能（e）{
e、 预防默认值（）
让files2=e.target.files
this.productimageFile=files2[0]
console.log（this.productImageFileDutimage）
},
itemCreate:函数（）{
// 商品タイトル
const title=this.title
const productDescription=this.productDescription
const itemImage=this.itemImage
{files}=itemImage[0]
如果（files.length==0）{
// ファイルが選択されていないなら何もしない
返回
}
常量文件=文件[0]//表紙画像ファイル
const filename=file.name//画像ファイル名
const itemImageLocation=`item images/${filename}`//画像ファイルのアップロード先
//待办事项：書籍データを保存する
火基
.储存
.ref（itemImageLocation）
.put（文件）//存储へファイルアップロードを実行
.然后（（）=>{
//储藏へのアップロードに成功したら、实时数据库に書籍デ?