element-uiファイルをアップロードしてファイル名を変更する方法の例

技術的背景Vue + axios + element-ui問題の発生
素晴らしい金曜日に、私は楽しくコードを打っています。突然商品からの神秘的なメッセージを受け取りました。オンラインでBUGが活動します。ねぇ！まさか！きっとあなたの開け方が間違っています。メッセージのスクリーンショットを開けたら、チャットルームの背景が突然にもう一つの関連のない絵になりました。見てみたら、これは私がアップロードしたばかりの図ではないですか？なぜそこに走ったのですか？
問題の位置づけ
私達のすべての静的な資源（例えば写真）はいずれもサーバーにアップロードします。活動中に訪問する時は静的な資源サーバに統一的にアクセスします。静的な資源をアップロードする時は重名の問題を処理していません。インターフェースの側は前に4桁の乱数を加えただけです。つまり、同じ名前の画像が10000枚を超えると、100%の画像が上書きされます。間違いなく直接上書きします。10000枚未満でも、同名の数が多いほど、被上書き確率が高くなります。
鍋を投げ始める
問題があったら慌てなくてもいいです。鍋が上手でさえあれば、すべての問題は問題ではない。私は直接に楽屋の担当者を見つけて、状況を説明しましたが、彼が淡々と言っていました。これは私のKPIではありません。？私はあなたのxx人を**して、男の人はすべて大きいブタのひづめです！他の人に頼ってはいけません。自分だけでやってみましょう。
怠けてみる
element-uiはこのように長年にわたって屹立しています。きっとファイル名を修正する重任を果たすことができると信じています。応援しない！今は金曜日の夜六時半です。いいです。ちゃんと食事ができないことに決まっています。
ファイルのアップロードをブロックします
ファイルのオブジェクトは直接ファイル名を変更することができません。file.nameは読み取り専用の属性です。強制的に値を付けたら、直接にエラーが発生しますので、element-ui->uploaderのデフォルトのアップロード行為をブロックして、自分でアップロードします。以下はコアHTMLコードで、主にbefore-uploadイベントを利用してアップロードを阻止します。

<el-upload :before-upload="beforeUpload">
  <i class="el-icon-plus" />
</el-upload>

beforeUploadコード：file.nameが読み取り専用の属性である以上、新しいfileオブジェクトを作成するしかないです。あなたが仁でないなら、私の不義を責めないでください。新しいファイル名はタイムスタンプ+元のファイル名です。

beforeUpload(file) {
  const timeStamp = new Date() - 0
  const copyFile = new File([file], `${timeStamp}_${file.name}`)
  this.uploadFile(copyFile)
  return false
}

uploadFileコード：FormDataオブジェクトを構築するには、これだけです。

uploadFile(file) {
  const formdata = new FormData()
  formdata.append('lbf-file-upload', file)
  formdata.append('name', 'lbf-file-upload')
  formdata.append('_csrfToken', this.$ajax.getCsrfToken()._csrfToken)
  this.postForm(formdata)
}

postFormコード：axiosライブラリを利用してサーバーにアップロードします。

postForm(formdata) {
  this.$ajax.post('/xxx/ajax/general/file/files', formdata).then(res => {
    if (res.code == null || res.code === 0) {
      // do something
    } else {
      this.$message.error(res.msg || res.message || '      ')
    }
  }).catch((err) => {
    this.$message.error(err.message || '      ')
  })
}

これで済みます後ですべてのファイルをアップロードして、自動的にタイムスタンププレフィックスを付けます。バックグラウンドの4桁の乱数メカニズム＋タイムスタンプ＋ファイル名、上書きしたいです。プログラマが彼女を探すのは難しいです。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。