Vue+Flask怎么實現(xiàn)圖片傳輸功能

今天小編給大家分享一下Vue+Flask怎么實現(xiàn)圖片傳輸功能的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

完整流程：

1.圖片轉為formdata 傳輸?shù)胶蠖?br/>2.后端接收后，確定文件后綴名無誤，修改文件名并保存到固定的路徑中
3.前端請求圖片
4.后端根據(jù)圖片名字返回圖片數(shù)據(jù)流
5.前端將數(shù)據(jù)流處理，轉為圖片

1.Vue上傳

<template>
    <div>
        <input type="file" class="file" id ='file'> 
        <input type="submit" @click="uploadClick">
    </div>
</template>
<script>
export default {
   
    data () {
        return {}
    },
    methods:{
        uploadClick(){
            console.log(document.getElementById('file').files[0]);
            var formData = new window.FormData() 
            formData.append('file',document.getElementById('file').files[0])
            upload(formData)
            
        }   
    }
}
</script>

//這是封裝的請求
export const upload = (file) => {
  return request({
    url: '/api/uavprp/upload',
    data: file,
    method: 'post',
    headers: { 
      'Content-Type': 'multipart/form-data'
     },
  })
}

2.Flask接收

#請求中獲取到上傳的圖片
a = request.files.get('file')
#限制文件后綴名必須為圖片的類型
allowed_filename = set(['png', 'jpg', 'JPG', 'PNG'])
isallowed = '.' in filename and filename.rsplit('.', 1)[1] in allowed_filename
path = basedir + "/image/"  #這里的image是自己創(chuàng)建的保存圖片文件夾路徑
img_name = change_file_name(a.filename,ImgID)#這是我自己定義的一個方法 為了修改圖片的名字為隨機生成的唯一ID，同時不修改后綴名
file_path = path + img_name#完整的保存路徑加圖片名
a.save(file_path)#保存

3.Vue請求圖片并轉換返回的數(shù)據(jù)流為圖片展示

<template>
    <div>
      <img :src="ferUrl"/>
    </div>
</template>
<script>
export default {
   
    data () {
        return {
            imgUrl: "",
        }
    },
    created(){
        getImg("ImgNXTIP298.jpg").then((res) => {
        this.imgUrl = window.URL.createObjectURL(res.data);//這里請求接收的一定是Blod類型數(shù)據(jù)
        console.log(this.imgUrl);
      });
    }
}
</script>


//封裝的圖片請求
export const getImg = (imgID) => {
  return request({
    url: '/api/ferchoosen/getFerImg',
    method: 'get',
    responseType:"blob",
    params: {
      imgID
    }
  })
}

4.Flask接收前端請求返回圖片數(shù)據(jù)流

imgID = request.args["imgID"]
    if imgID == None:
        return output(msg="該圖片不存在")
    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'#返回的內容類型必須修改
    return response

以上就是“Vue+Flask怎么實現(xiàn)圖片傳輸功能”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。