Lu dajuan 2022-07-24 01:42:27 阅读数:218
La fonction est de faire passer une image de l'avant à l'arrière,Après la détection de la cible à l'arrière - plan,Passer à l'avant,Après réception et présentation à l'avant.
1、Cette section est utiliséeelelent ui
Deupload
Components,Les codes sont les suivants::
viewMoyenne
<el-upload
:action="uploadURL"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handlesuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
methodMoyenne
handlePictureCardPreview(file) {
// C'est“file”Contient toutes les informations de cette image par défaut:Nom,url...
console.log("Imprimerzi",file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
dataMoyenne
uploadURL:process.env.VUE_APP_BASE_API,
Par ici.on-preview
- Oui.Crochet lorsque vous cliquez sur un fichier téléchargé dans la liste des fichiers, Cette opération consiste simplement à télécharger des images locales à l'avant - plan et à les afficher sur la page de l'avant - plan .
2、 Pour passer à l'arrière - plan ,action Ce crochet doit être écrit comme ça :
uploadURL:process.env.VUE_APP_BASE_API+"/test_moudle/test/",
C'est - à - dire qu'il y a un routage derrière .
1、 Recevoir d'abord l'image
img = request.FILES.get('file')
Parce qu'il n'y a pas de nom à l'avant , C'est passé directement ,Alors appuie.“file”
Traitement des noms .
2、 Ensuite, l'image sera testée , Parce que mon code de test est écrit mort , Ce qu'il faut, c'est un chemin d'image ,Comme suit,
parser.add_argument('--source', type=str, default='windmill/images/test', help='file/dir/URL/glob, 0 for webcam')
Je n'ai donc pas pu traiter directement les images transmises par le Front End et les entrer dans le réseau de détection , Vous ne pouvez enregistrer l'image qu'une seule fois , Puis sauvegardez le chemin vers le réseau de détection :
img = request.FILES.get('file')
print(' Imprimer le nom et le type ',type(img),img)
base_dir = settings.BASE_DIR
upload_dir = os.path.join(base_dir, 'upload')
path = os.path.join(upload_dir, img.name)
with open(path, 'wb+') as f:
for chunk in img.chunks():
f.write(chunk)
timestrap = str(time.time())
Donnez le chemin au réseau de détection
parser.add_argument('--source', type=str, default=path, help='file/dir/URL/glob, 0 for webcam')
Cette étape exige de convertir l'image en base64 Le talent de la forme passe à l'avant
...... Code de détection omis ici
res_path = os.path.join(base_dir, 'runs', 'detect', timestrap, img.name)
if os.path.exists(res_path):
print(' Les résultats des tests ')
with open(res_path, 'rb') as f:
data = f.read()
result['msg'] = bytes.decode(base64.b64encode(data))
else:
result['msg'] = ' Il y a des images téléchargées mais aucun résultat de détection '
else:
result['msg'] = ' Pas de photos téléchargées '
return JsonResponse(result)
<div class="myres">
<img width="20%" :src="'data:image/png;base64,'+detect_picture">
</div>
handlesuccess(response, file, fileList){
console.log("Imprimer",file,fileList);
this.detect_picture = response.msg;
},
Le crochet sur lequel la tête reçoit l'image de l'arrière - plan et traite est upload
Dans les composantson-success
(on-success=“handlesuccess”)
Ensuite, il faut noter que lors de la présentation de l'image ,Besoin desrc(Chemin)Avant plus'data:image/png;base64,'
:
<img width="20%" :src="'data:image/png;base64,'+detect_picture">
Un tel test est petit demoC'est fait-----------
Copyright:Cet article est[Lu dajuan]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2022/205/202207240141247643.html