So verwenden Sie die Upload-Upload-Komponente von element-ui in Vue

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung der Upload-Upload-Komponente von element-ui im ​​Vue-Projekt vorgestellt. Jetzt teile ich es mit Ihnen und gebe Ihnen eine Referenz.

In diesem Artikel wird ein Beispiel für die Verwendung der Upload-Upload-Komponente von element-ui im ​​Vue-Projekt vorgestellt. Die Details lauten wie folgt:

<el-upload
        v-else
        class=&#39;ensure ensureButt&#39;
        :action="importFileUrl"
        :data="upLoadData"
        name="importfile"
        :onError="uploadError"
        :onSuccess="uploadSuccess"
        :beforeUpload="beforeAvatarUpload"
        >
        <el-button size="small" type="primary">确定</el-button>

Darunter importFileUrl ist die Hintergrundschnittstelle, und upLoadData soll beim Hochladen zusätzlicher Parameter hochgeladen werden, uploadError ist die Fallback-Funktion, wenn der Datei-Upload fehlschlägt, uploadSuccess ist die Fallback-Funktion, wenn der Datei-Upload erfolgreich ist, beforeAvatarUpload ist die Funktion, die vor dem Hochladen der Datei aufgerufen wird , können wir hier den Dateityp beurteilen.

data () {
  importFileUrl: 'http:dtc.com/cpy/add',
  upLoadData: {
    cpyId: '123456', 
    occurTime: '2017-08'
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log('上传文件', response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log('上传失败，请重试！')
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split('.')[1] === 'xls'
   const extension2 = file.name.split('.')[1] === 'xlsx'
   const extension3 = file.name.split('.')[1] === 'doc'
   const extension4 = file.name.split('.')[1] === 'docx'
   const isLt2M = file.size / 1024 / 1024 < 10
   if (!extension && !extension2 && !extension3 && !extension4) {
    console.log(&#39;上传模板只能是 xls、xlsx、doc、docx 格式!&#39;)
   }
   if (!isLt2M) {
    console.log(&#39;上传模板大小不能超过 10MB!&#39;)
   }
   return extension || extension2 || extension3 || extension4 && isLt2M
  }
}

Seit kurzem verwende ich VUE als Front-End-Framework, um mein eigenes Projekt durchzuführen. Wenn ich Dateien auf den Server hochladen muss, sagte mir mein Kollege, dass dies die Aktion beim Hochladen ist, also die Upload-Adresse kann nicht dynamisch geändert werden, und dann überprüfen Sie es. Nach einer Weile muss die folgende Verarbeitung durchgeführt werden, bevor es dynamisch verwendet werden kann:

Aktion ist ein erforderlicher Parameter und sein Typ ist Zeichenfolge. Wir schreiben Aktion als : Aktion, gefolgt von einem Methodennamen, Aufruf der Methode und Rückgabe der gewünschten Adresse, Codebeispiel:

//html 代码
<el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList">
  <el-button size="small" type="primary" >点击上传</el-button>
  <p slot="tip" class="el-upload__tip"></p>
</el-upload>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie highCharts zum Zeichnen von 3D-Kreisdiagrammen in Vue

So verwenden Sie ueditor in Vue

So implementieren Sie ein benutzerdefiniertes Steuerungsmenü in der unteren Schublade mit React Native

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Upload-Upload-Komponente von element-ui in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!