Vue.js

Ng-file-upload（[アップロード]ボタンをクリックして単一のファイルを選択してアップロードした場合、実際にファイルを選択する前に以前のファイル情報を保持するにはどうすればよいですか？）...



Ng File Upload When Single File Is Selected



ng-file-uploadの以前の調査には、次の指示が含まれる場合があります。

You can use ng-model or ngf-change instead of specifying function for ngf-drop and ngf-select

ngf-change



「クリック」ボタンと「キャンセル」ボタンはイベントをトリガーしません。ファイルをダブルクリックして、トリガーするファイルを選択します。

of-before-model-change = ' beforeChange（$ files、$ file、$ newFiles、$ DuplicateFiles、$ invalidFiles、$ event）。 '



「クリック」ボタンと「キャンセル」ボタンはイベントをトリガーしません。ファイルをダブルクリックして、トリガーするファイルを選択します。

ngf-keep （ngf-multiple = 'true'マルチファイルアップロードの場合）

False：デフォルトの状態



True：最後のファイル情報を保持し、新しいファイル情報を追加します

明確：ファイルから重複ファイルを削除します

モデルの

配列ファイルではなく単一ファイルの条件：

1）ngf-multipleが設定されていないかfalseに設定されている

2）要素に複数の属性が設定されていません

3）ngf-keepが設定されていないか、false

条件を要約すると、つまり、単一ファイルのアップロードの場合、ng-modelの値は単一ファイルの情報データです。

問題追跡のアイデア：

<button class='btn btn-info' ngf-select ng-model='standardFile' accept='.txt' ngf-max-height='1000' type='file' ng-disabled='standardFile.uploading'>Select a custom dictionary filebutton>

ng-modelの代わりにNg-change

<button class='btn btn-info' ngf-select ngf-change='standardFileChange($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event)' accept='.txt' ngf-max-height='1000' type='file' ng-disabled='standardFile.uploading'>Select a custom dictionary filebutton>
$scope.standardFileChange = function($files, $file, $newFiles, $duplicateFiles, $invalidFiles, $event) { console.log($files,$file,$newFiles, $duplicateFiles, $invalidFiles, $event) if ($newFiles[0]) { $scope.standardFile = $newFiles[0] } }

上記の解決策は、ボタンをクリックしてボタンを選択したときに以前のファイル情報を不明確にする可能性がありますが、それを削除するボタンがある場合は、状況が表示されます！

<td class='w10'> <button class='btn btn-info' type='submit' ng-click='standardSubmit(standardFile)' ng-disabled='!standardFile||standardFile.uploading||standardFile.dicsLoading'>Uploadbutton> td> <td class='w10'> <button class='btn btn-danger' ng-click='removestandardFile()' ng-disabled='!standardFile||standardFile.uploading||standardFile.dicsLoading'>Removebutton> td>

$ scope.removestandardFile = function（）{
$ scope.standardFileを削除します
}

なぜなら

$scope.standardFile = $newFiles[0] The two-way binding of data causes problems with variables!

問題の追跡を継続する

$scope.standardFile = angular.copy($newFiles[0])

双方向バインディングをコピーに変更しますが、印刷が成功しない場合は、見つかったカスタムコピー機能を使用してください。

function copy(obj) { var clone = {} for (var key in obj) { clone[key] = obj[key] } return clone }

パラメータを渡す過程で、パラメータが正しく送信されないことがわかりました！

ディープコピーを作成したいようです。引き続き関数extendDeep関数を探してください。

var extendDeep = function(dst) { angular.forEach(arguments, function(obj) { if (obj !== dst) { angular.forEach(obj, function(value, key) { if(angular.isObject(dst[key]) || angular.isArray(dst[key])){ extendDeep(dst[key], value) } else { dst[key] = angular.copy(value) } }) } }) return dst }

もう一度試して、成功してください！

$scope.standardFile = extendDeep($newFiles[0])

案の定、浅いコピーと深いコピーです！ ！

転載：https：//www.cnblogs.com/echo2016/p/5752121.html