Vue+Flask中上传图片并在后端保存

atregret

已于 2023-04-10 20:08:18 修改

阅读量1k

点赞数 2

文章标签： vue.js flask 前端

于 2023-04-10 20:00:25 首次发布

本文链接：https://blog.csdn.net/atregret/article/details/130068314

版权

文章介绍了在本地开发环境中，前端通过HTMLinput标签选择图片，使用FormData进行文件上传，并通过Ajax发送到后端。后端则从request.files获取文件并保存到服务器。前端尝试使用FileReader读取文件为DataURL来预览图片，但遇到了问题。文章提出了两个疑问：1)前端为何无法展示图片；2)为何不能将DataURL赋值给img的src属性。

摘要由CSDN通过智能技术生成

本地调试，前后端在一台机器上

前端

首先通过input标签获取文件

accept="image/*"指定只能上传图片

<input type="file" accept="image/*" @change="sendimg">

然后在methods中

新建FormData()对象，以key-value的形式传入要发送的数据

methods:{
    sendimg(e){
      //获取文件
      this.file = e.target.files[0]
   
      //发送图片
      let formData = new FormData()
      formData.append('file',this.file)
      console.log("发送图片")
      this.$ajax.post('/upload',formData).then(rsp=>{
        console.log(rsp)
      })
    }
}

为什么上传的图片在e.target中呢？为什么呢：D

后端

直接从request.files中找到FormData设置的key

利用f.save()保存到服务器本地

@app.route("/upload",methods=['POST'])
def upload():
    print("接收中")
    f = request.files['file']
    if f:
        print("成功接收")
        save_path = os.path.join(os.path.abspath(os.path.dirname(__file__)),'upload',f.filename)
        f.save(save_path)
       # 返回图片的预览地址
        return jsonify({'imgurl':save_path,'code':200})

最后返回保存的文件地址，方便前端展示图片(Q1：为什么我展示不出来，是不能用绝对路径吗：(

Q2：我使用FileReader生成DataURL,却无法赋值给img的src属性，为什莫？

 <img v-if="imgurl" :src="imgurl">



data() {
    return {
 
      file: '',
      imgurl:"",
    },

methods:{
   sendimg(e){
      //获取文件
      this.file = e.target.files[0]

      //预览图片
      var reader = new FileReader();
      
      reader.onload=function(){
         this.imgurl = reader.result;
         console.log(this.imgurl)
       }
      reader.readAsDataURL(this.file);


      //发送图片
      let formData = new FormData()
      formData.append('file',this.file)
      console.log("发送图片")
      this.$ajax.post('/upload',formData).then(rsp=>{
        console.log(rsp)
      })
    }