How to realize the function of picture transmission by Vue+Flask
Today, the editor will share with you the relevant knowledge points about how to achieve picture transmission function in Vue+Flask. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.
Complete process:
1. The picture is transferred to formdata to the backend.
two。 After receiving the backend, make sure that the suffix of the file is correct, modify the file name and save it to a fixed path
3. The front end requests a picture
4. The backend returns the image data stream based on the picture name.
5. The front end processes the data stream and converts it into a picture.
1.Vue upload
Export default {data () {return {}}, methods: {uploadClick () {console.log ('file') .files [0]) Var formData = new window.FormData () formData.append ('file',document.getElementById (' file'). Files [0]) upload (formData)} / / this is the encapsulated request export const upload = (file) = > {return request ({url:'/ api/uavprp/upload', data: file, method: 'post' Headers: {'Content-Type':' multipart/form-data'},})}
2.Flask reception
# get the uploaded image a = request.files.get ('file') in the request # restrict the file suffix to be the type of picture allowed_filename = set ([' png', 'jpg',' JPG', 'PNG']) isallowed ='.' In filename and filename.rsplit ('.', 1) [1] in allowed_filenamepath = basedir + "/ image/" # where image is the self-created path to save pictures folder img_name = change_file_name (a.filename _ ImgID) # this is a method I define to modify the name of the picture to a randomly generated unique ID Do not modify the suffix file_path = path + img_name# complete save path plus picture name a.save (file_path) # save
3.Vue requests the picture and converts the returned data stream into the image display.
Export default {data () {return {imgUrl: "",}}, created () {getImg ("ImgNXTIP298.jpg"). Then ((res) = > {this.imgUrl = window.URL.createObjectURL (res.data); / / the request here must be Blod type data console.log (this.imgUrl);}) }} / / encapsulated picture request export const getImg = (imgID) = > {return request ({url:'/ api/ferchoosen/getFerImg', method: 'get', responseType: "blob", params: {imgID}})}
4.Flask receives the request from the front end to return the picture data stream.
ImgID = request.args ["imgID"] if imgID = = None: return output (msg= "the picture does not exist") path = basedir + "/ image/" image_data = open (os.path.join (path,'% s'% imgID) "rb") .read () response = make_response (image_data) response.headers ['Content-Type'] =' image/png'# the returned content type must be modified. Return response above is all the content of the article "how to transfer pictures by Vue+Flask". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
