Il est utilisé pour les composants dans element puis modifié. La méthode générale est quasiment la même. Les deux manières d'écrire le code sont les suivantes :
1) L'interface est écrite directement en html
<el-col :span="12"> <el-form-item label="附件" prop="attachments" :rules="[]"> <el-upload class="upload-demo" ref="upload " multiple :action="`${urlapi}v1/common/base/upload`" //接口 :limit="limit" :file-list="fileList" :on-success="onSuccess" > <el-button slot="trigger" size="small" type="primary" >选取文件</el-button > </el-upload> </el-form-item> </el-col>
Définir les données variables :{ limit : 2, //Limiter le nombre d' accessoires de fichiers téléchargés : [] } //Nom de domaine créé () { this.urlapi = process.env.VUE_APP_SERVER_URL }, // Le téléchargement du fichier a réussi onSuccess ( res) { const info = res.data this.accessory.push(info) // Attribue la valeur dans info à la variable accessoire if (this.accessory.length === this.limit) { const fileList = this.accessory. join( ',') // Vérifiez le type de caractère transmis this.inputForm.attachments = fileList } },
2) Téléchargement de la méthode Base64
<el-upload :http-request="uploadImg" :show-file-list="false" class="avatar-uploader" action="" accept="image/jpg, image/jpeg, image/png" > < el-image v-if="form.image" :src="`${baseUrl}/common/viewImage?imagepath=${form.image}`" class="avatar" fit="contain" > <template #error> <div class="image-slot"> <i class="el-icon-picture-outline"/> </div> < /modèle> </el-image> <i v-else class="el-icon-plus avatar-uploader-icon"/> </el-upload>
// Utilisation de base64 getBase64Image (file) { const promise = new Promise((resolve, rejet) => { const reader = new FileReader() reader.readAsDataURL(file) reader.onload = function (e) { solve(e) } }) return promise }, async uploadImg (res) { const { file } = res const PicBase = wait this.getBase64Image(file) try { const obj = wait this.addUpload(PicBase.target.result) this.inputForm. covePic = obj.fileUrl } catch (erreur) { console.log (erreur) } }, // Télécharger l'interface d'image addUpload (fichier) { this.$http({ url : `/v1/common/base/upload`, méthode : 'post', données : { fichier } //Passer les paramètres }).then(( ( { data }) => { this.inputForm.covePic = data.cover }) }, ou choisissez simplement l'un des deux // 2. Téléchargez l'interface d'image addUpload () { let file =this.inputElem.covePic; / / Obtenir des informations sur le fichier let data = new FormData(); //Créer un objet d'instance data.append("file", file); //Instancier une instance d'objet this.$http({ url: `/v1/common/base/ upload` , méthode : 'post', data : { data } // Passer les paramètres }).then(({ data }) => { this.inputForm.covePic = data.cover }) } ,
enfin
Merci d'avoir lu. Si vous avez des lacunes, n'hésitez pas à en discuter dans la zone de commentaires !