Comment utiliser le composant de téléchargement dans le projet Vue

Cette fois, je vais vous montrer comment utiliser le composant upload dans le projet vue. Quelles sont les précautions pour utiliser le composant upload dans le projet vue. Voici un cas pratique, jetons un coup d'oeil.

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

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

. Parmi eux, importFileUrl est l'interface d'arrière-plan, upLoadData est le paramètre supplémentaire à télécharger lors du téléchargement du fichier, 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. , et beforeAvatarUpload est la fonction de secours lors du téléchargement du fichier. Pour la fonction appelée auparavant, nous pouvons juger ici du type de fichier.

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

J'ai récemment utilisé VUE comme framework frontal pour mon propre projet. Lorsque j'ai eu besoin de télécharger des fichiers sur le serveur, mon collègue m'a dit que l'action de téléchargement, c'est-à-dire que l'adresse de téléchargement ne pouvait pas être modifiée de manière dynamique. regardez et constatez que le traitement suivant est requis pour une utilisation dynamique :

L'action est un paramètre obligatoire et son type est string. Nous écrivons l'action sous la forme : action, suivie d'un nom de méthode, appelons la méthode et renvoyons 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-uploadtip"></p>
</el-upload>

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Encapsulation personnalisée de composants inter-domaines ajax

Les étapes spécifiques d'express+multer pour implémenter le téléchargement d'images de nœud

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!