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>
我是新来的,所以如果我做错了什么,请告诉我。太感谢了。
解决方案
文件是局部变量,改成全局变量吧!
例子:
<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)
})
}
}
编辑:您还应该使用您的命名约定,有两个不同的变量名为“文件”,这也可能是导致错误的原因。通过以对象所做的或它们是什么来命名对象,从而避免错误。
推荐阅读
- c++ - 填充和打印 - C++ 中的二维数组
- c# - ClosedXML 使用路径创建现有工作簿会出现异常
- flutter - Flutter googleMap 方向 URL 和 streetView 未在 Android 11 中启动
- reactjs - 使用 Hooks 反应 Redux
- mysql - 如何在 MySQL 中检索两个外键 ID 和一个相同基表的数据?
- python - 如何使用 statsmodels 指定在 qq 图中绘制的 line='s' 或 line=45 线的颜色
- pointers - 引用的静态变量中的错误值
- sql - 合并表时如何在2列中使用1个字段
- algorithm - 现代搜索引擎如何合并倒排索引中的大型帖子列表
- python - Zoho CRM API:基于 Python 请求的 POST 或 GET 身份验证 + 联系人插入