vue上传图片或文件

最新推荐文章于 2025-05-07 09:01:12 发布

Lilyxu1111

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量147

点赞数

本文链接：https://blog.youkuaiyun.com/Lilyxu1111/article/details/119572493

版权

关键词由优快云通过智能技术生成

这篇博客介绍了如何在Vue项目中使用input标签的file类型来选取文件，并通过监听change事件触发上传。在JavaScript部分，利用FormData对象将选取的文件添加到参数中，然后通过axios发送POST请求将文件上传到指定URL。成功上传后，从响应数据中获取图片路径的域名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//在body里面写
<input type="file" id="file" @change="upimg($event)" name="img" />   //需要注意的是name属性必须写

//在js里面
upimg(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("img", file);
      this.axios
        .post("http://api_devss.wanxikeji.cn/api/savePic", param)
        .then((res) => {
          this.imgId = res.data.data;
          console.log(this.imgId);
        //其中res.data.data就是图片路径的域名,可以通过获取input框的value来获取
        });
    },