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 !