vue 图片上传

概述其实这个问题一直困扰了我很久，因为上传图片功能一直是把我搞的云里雾里的，而这次我终于是彻底的把它搞明白了！！！现在把自己的思路整理出来分享一下。 首先完成这个需求我用到了element 用到了axios 先讲一下上传的流程好了。 一般的上传图片流程是这样的： 先将文件通过file的类型发送过去，这个文件会包含uid、name等等 后台成功收到后，将图片存到ftp，回调会返回一个url，这个url就 其实这个问题一直困扰了我很久，因为上传图片功能一直是把我搞的云里雾里的，而这次我终于是彻底的把它搞明白了！！！现在把自己的思路整理出来分享一下。 首先完成这个需求我用到了element 用到了axios 先讲一下上传的流程好了。

一般的上传图片流程是这样的：

先将文件通过file的类型发送过去，这个文件会包含uID、name等等 后台成功收到后，将图片存到ftp，回调会返回一个url，这个url就是图片引用的src地址了，可以直接访问啦。 下面是代码部分 首先element找到上传图片的组件。

<el-upload action="233" :auto-upload="false" :http-request="postPhoto" List-type="picture-card" :on-prevIEw="handlePictureCardPrevIEw" :on-remove="handleRemove" :limit="1" :on-change="fail">      <i ></i>    </el-upload>    <span>只支持jpg与png格式文件上传</span>    <el-dialog :visible.sync="dialogVisible">      <img wIDth="100%" :src="dialogImageUrl" alt>    </el-dialog>

解释一下上面的部分 默认的这个上传组件是自动上传的，但是我们的需求不需要那样---:auto-upload="false"，所以我设为了fasle。 action是必选项，配置上传的路径接口，其实如果关闭了自动上传，这个地址也用不到了，但是要随便写点东西。 其他的我就不一一介绍了，文档里很详细。这里重点的是:on-change="fail"，会监听变化，只要图片传进来了，这里的fail就会有参数传过去了。当然啦，使用ref去绑定也是可以的，只不过人家element既然有这个方法了，我们就用咯。 下面是Js

这里就是上面绑定的change事件了 fail (file) {      this.dialogImageUrl = file.url;      this.dialogImageUrl = new window.file([this.dialogImageUrl],file.name,{        type: file.type      });      上面负责回显，调用的本地      // this.dialogVisible = true;      这里我在data中初始化了一个变量，imgPost，给他赋值。      this.imgPost = file.raw    },

file就长这个样子，raw是我们需要的。

这里则是你自己绑定的上传按钮了， getdat () {      let token1 = sessionStorage.getItem("token");      由于我们的后台需要发送token，所以这里存了一下                  首先，创建一个新的FormData。      let formData1 = new FormData();          formData1.append("file",this.imgPost)      formData1.append("token",token1)  // 划重点！！这里需要特别说明，你会发现发现打印这个formData1为空。      这里的append并不是没有追加进去，是因为控制台打印的formdata是原型，为类的私有字段，外界访问不到，可以在发送的请求中查看      // 这就是要传的文件      console.log(formData1)      upload是我的封装的接口=====换成你自己的即可      upload(formData1).then(res => {        如果一切顺利，那么这里的res应该就有你们后台给的回调url啦。        }

祝各位工作顺利~ 总结

以上是内存溢出为你收集整理的vue 图片上传全部内容，希望文章能够帮你解决vue 图片上传所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。