Maison > Article > interface Web > Comment utiliser le composant de téléchargement Upload d'element-ui dans vue

Comment utiliser le composant de téléchargement Upload d'element-ui dans vue

亚连original: 2018-06-07 10:50:284077parcourir

Cet article présente principalement l'exemple d'utilisation du composant Upload d'element-ui dans le projet vue. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente un exemple d'utilisation du composant Upload d'element-ui dans le projet vue. J'aimerais le partager avec vous. Les détails sont les suivants :

<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>

where importFileUrl. est l'interface d'arrière-plan et upLoadData est lors du téléchargement de fichiers. Paramètres supplémentaires à télécharger, uploadError est la fonction de secours lorsque le téléchargement du fichier échoue, uploadSuccess est la fonction de secours lorsque le téléchargement du fichier est réussi, beforeAvatarUpload est la fonction appelée avant de télécharger le fichier, nous peut juger du type de fichier ici.

data () {
  importFileUrl: &#39;http:dtc.com/cpy/add&#39;,
  upLoadData: {
    cpyId: &#39;123456&#39;, 
    occurTime: &#39;2017-08&#39;
  }
},
methods: {
  // 上传成功后的回调
  uploadSuccess (response, file, fileList) {
   console.log(&#39;上传文件&#39;, response)
  },
  // 上传错误
  uploadError (response, file, fileList) {
   console.log(&#39;上传失败，请重试！&#39;)
  },
  // 上传前对文件的大小的判断
  beforeAvatarUpload (file) {
   const extension = file.name.split(&#39;.&#39;)[1] === &#39;xls&#39;
   const extension2 = file.name.split(&#39;.&#39;)[1] === &#39;xlsx&#39;
   const extension3 = file.name.split(&#39;.&#39;)[1] === &#39;doc&#39;
   const extension4 = file.name.split(&#39;.&#39;)[1] === &#39;docx&#39;
   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
  }
}

Récemment, j'utilise VUE comme framework frontal pour mon propre projet Lorsque j'ai besoin de télécharger des fichiers sur le serveur, mon collègue m'a dit que l'action en téléchargement, c'est-à-dire le téléchargement. L'adresse ne peut pas être modifiée dynamiquement, puis j'ai jeté un coup d'œil et j'ai découvert que le traitement suivant doit être effectué avant de pouvoir être utilisée dynamiquement :

l'action est un paramètre obligatoire et son type est une chaîne. Nous écrivons une action. as : action, suivi d'un nom de méthode pour appeler la méthode. Renvoyez l'adresse souhaitée, exemple de code :

//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>

// js 代码在 methods中写入需要调用的方法
methods:{
  UploadUrl:function(){
    return "返回需要上传的地址";   
  }  
}

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile. à tout le monde à l'avenir.

Articles Liés

Voir plus