Django vue Mutual Pictures and Processing and presentation

----------Notez une petite chose faite ces deux joursdemo

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.

Un.、Télécharger l'image de l'avant vers l'arrière

1、Cette section est utiliséeelelent uiDeuploadComponents,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 .

2.、 L'arrière - plan reçoit des images et détecte

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

Trois、 Transmettre l'image détectée à l'avant

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)

Quatre、Réception frontalebase64 Photos et présentation

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