Maison > Article > interface Web > Une brève analyse de la façon de personnaliser la méthode de téléchargement du composant AntdV Upload customRequest
Comment personnaliser la méthode de téléchargement du composant AntdV Upload customRequest ? L'article suivant vous présentera la méthode de téléchargement personnalisée du composant Upload d'Ant Design Vue customRequest. J'espère qu'il vous sera utile !
customRequest Vous pouvez personnaliser votre propre méthode de téléchargement
Le système de gestion d'arrière-plan, le cadre d'interface utilisateur est Ant Design de Vue et le composant Upload est utilisé pour télécharger des images.
Description de l'exigence : télécharger des images et les convertir en base64
Dans la méthode API, il existe une méthode pour personnaliser le comportement de téléchargement en remplaçant le comportement de téléchargement par défaut, vous pouvez personnaliser votre propre implémentation de téléchargement
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="照片"> <a-upload v-decorator="['zp', validatorRules.zp]" listType="picture-card" class="avatar-uploader" :showUploadList="false" :beforeUpload="beforeUpload" :customRequest="selfUpload" > <img v-if="picUrl" :src="getAvatarView()" alt="头像" style="max-width:90%"/> <div v-else> <a-icon :type="uploadLoading ? 'loading' : 'plus'" /> <div class="ant-upload-text">上传</div> </div> </a-upload> </a-form-item>
//对上传的文件处理 selfUpload ({ action, file, onSuccess, onError, onProgress }) { console.log(file, 'action, file'); const base64 = new Promise(resolve => { const fileReader = new FileReader(); fileReader.readAsDataURL(file); fileReader.onload = () => { resolve(fileReader.result); // this.formImg = fileReader.result; } }); }
[Recommandation associée : "Tutoriel vue.js"]
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!