This article shares the specific code for Vue+Flask to implement image transmission function for your reference. The specific content is as follows
Complete process:
1. Convert the image to formdata and transmit it to the backend
2. After the backend receives it, make sure that the file suffix name is correct, modify the file name and save it to a fixed path.
3. Front-end request picture
4. The backend returns the image data stream based on the image name
5. The front-end processes the data stream and converts it into an image
Upload
<template>
<div>
<input type="file" class="file" id ='file'>
<input type="submit" @click="uploadClick">
</div>
</template>
<script>
export default {
data () {
return {}
},
methods:{
uploadClick(){
(('file').files[0]);
var formData = new ()
('file',('file').files[0])
upload(formData)
}
}
}
</script>
//This is a package requestexport const upload = (file) => {
return request({
url: '/api/uavprp/upload',
data: file,
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
})
}take over
#Get uploaded image in requesta = ('file')
#Restrict file suffix name must be the type of imageallowed_filename = set(['png', 'jpg', 'JPG', 'PNG'])
isallowed = '.' in filename and ('.', 1)[1] in allowed_filename
path = basedir + "/image/" #The image here is the folder path that you created to save the imageimg_name = change_file_name(,ImgID)#This is a method I defined myself in order to modify the image name to a randomly generated unique ID, and not modify the suffix name.file_path = path + img_name#Full save path plus image name(file_path)#saveRequest the picture and convert the returned data stream to display the picture
<template>
<div>
<img :src="ferUrl"/>
</div>
</template>
<script>
export default {
data () {
return {
imgUrl: "",
}
},
created(){
getImg("").then((res) => {
= ();//The requested here must be Blod type data ();
});
}
}
</script>
//Packaged picture requestexport const getImg = (imgID) => {
return request({
url: '/api/ferchoosen/getFerImg',
method: 'get',
responseType:"blob",
params: {
imgID
}
})
}Receive front-end request to return image data stream
imgID = ["imgID"] if imgID == None: return output(msg="This picture does not exist") path = basedir + "/image/" image_data = open((path, '%s' % imgID), "rb").read() response = make_response(image_data) ['Content-Type'] = 'image/png'#The returned content type must be modified return response
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.