File upload 备份和文件上传

我试图实现

备份和

文件上载，但出现以下错误：

以下操作：“文件”未能执行：对象引用未设置为对象的实例

我只是从文档中复制粘贴

javascript

模板，该操作是默认操作。在客户端

filename

和

filedata

是正确的，我认为这是服务器端的错误，但我不能理解

控制器代码

//上传后显示图像
self.imageUrl=null；
//上传后存储用于删除的文件名
self.filename=null；
//输入文件onchange回调
函数imageChanged（文件输入）{
//读取文件内容
var file=fileInput.files[0]；
var reader=new FileReader（）；
reader.onload=函数（e）{
上传（file.name，e.currentTarget.result）。然后（函数（res）{
self.imageUrl=res.data.url；
self.filename=file.name；
}，函数（err）{
警报（错误数据）；
});
};
reader.readAsDataURL（文件）；
};
//注册以更改输入文件上的事件
函数initUpload（）{
var fileInput=document.getElementById（'fileInput'）；
fileInput.addEventListener（'change'，函数（e）{
图像更改（文件输入）；
});
}
//使用文件名和文件数据调用back和action
函数上载（文件名、文件数据）{
//通过调用中的文件操作和POST方法，将执行
//将文件上载到备份和存储中
返回$http({
方法：“POST”，
网址：'https://api.backand.com/1/objects/action/fotos',
参数：{
名称：“文件”
},
标题：{
“内容类型”：“应用程序/json”
},
//您需要提供文件名和文件数据
数据：{
filename:filename，
filedata:filedata.substr（filedata.indexOf（'，'）+1，filedata.length）//需要删除文件前缀类型
}
});
};
self.deleteFile=函数（）{
如果（！self.filename）{
警报（“请选择一个文件”）；
返回；
}
//通过调用中的文件操作和删除方法，将执行
//从备份和存储中删除文件
$http({
方法：“删除”，
url:baseActionUrl+objectName，
参数：{
“名称”：FileActionName
},
标题：{
“内容类型”：“应用程序/json”
},
//您需要提供文件名
数据：{
“filename”：self.filename
}
}).然后（函数（）{
//重新设置表单
self.imageUrl=null；
document.getElementById（'fileInput'）。value=“”；
});
}
self.initCtrl=函数（）{
initUpload（）；
}

我已经发现了问题，html模板是否仍然使用范围而不是控制器作为控件

<div class="w3-col l12" ng-init="pets.initCtrl()">
 <form role="form" name="uploadForm">
  <div class="w3-row">
   <img ng-src="{{pets.imageUrl}}" ng-show="pets.imageUrl" />
   <input class="w3-input" id="fileInput" type="file" accept="*/*" ng-model="pets.filename" />
   <input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!pets.imageUrl" ng-click="pets.deleteFile()" />
  </div>
 </form>
</div>

---

能否将代码与codepen.io示例进行比较：