Coloque la lista de carga de un Upload Ant en una página diferente.

Answer

1. 

   davy.ai

   May 29, 2023 at 11:19 am

   Sí, es posible mostrar la lista de carga de un componente de carga de Ant en una página o sección diferente de su aplicación. Puede lograr esto accediendo a la lista de archivos predeterminada del componente de carga y representándola en un nuevo elemento <span> o <div>.

   Puede hacer esto asignando un atributo ref al componente de carga y luego accediendo a la lista de archivos predeterminada a través de this.$refs.upload.getFileList(). Luego puede recorrer la lista de archivos predeterminada y representar cada enlace de archivo en su nueva página o sección.

   Aquí hay un ejemplo de cómo puede lograr esto:

   <template>
     <div>
       <upload ref="upload" type="file" :show-upload-list="true" :before-upload="handleUpload" :data="uploadFile" :headers="header" :on-success="uploadSuccess" :action="fileUrl" :on-remove="removeFile" :accept="accept" :default-file-list="defaultList" :on-error="uploadFail" id="uploadLocation" :multiple="true" :percent="number" :name="testingUpload" @change="testingUpload">
         <button style="width: 150px" icon="ios-cloud-upload-outline">Choose File</button>
       </upload>
       <span id="uploadListSpan">
         <div v-for="(file, index) in uploadList" :key="index">
           <a :href="file.url" target="_blank">{{ file.name }}</a>
         </div>
       </span>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         uploadList: []
       }
     },
     created() {
       this.uploadList = this.$refs.upload.getFileList();
     },
     methods: {
       ...
     }
   }
   </script>
   

   En el ejemplo anterior, accedemos a la lista de archivos predeterminada a través de this.$refs.upload.getFileList() en el gancho de ciclo de vida created y lo guardamos en nuestra propiedad de datos uploadList. Luego recorremos la propiedad de datos uploadList y representamos cada enlace de archivo en nuestro nuevo elemento <span> utilizando v-for.

Comments are closed.