vue获取待上传图片对象并显示图片

发表于 更新于 分类于 ， Changyan： 本文字数： 575 阅读时长 ≈ 2 分钟

我们日常使用vue常用的框架如：iView、Element等上传时直接单独将资源上传上去再返回上传成功的资源信息。几乎现在只有在不使用api接口的时候才会想到让文件资源与数据一起传给服务器去处理，通常这时候我们采用form表单，并设置其enctype=multipart/form-data，但是如果我们既希望使用api发送请求，又喜欢数据携带资源，该如何处理呢？

期望效果

数据资源同步发送post请求，选择文件前如下：

选择图片后不直接上传，但是显示要上传的图片，且点击提交数据后资源与数据一起发送至服务器，如下：

下面一起来实现这种效果。

获取待上传图片对象

我这里使用的vue，如果你是用的jquery更好处理这个问题了。

模板代码：

1
2
3
4
5
6
7
8
9
10
<FormItem label="图片">
                  <div class="ivu-upload ivu-upload-drag" v-on:click="handelup">
                    <input type="file" multiple="multiple" class="ivu-upload-input" ref="filei" v-on:change="up">
                    <img :src="tempImg" alt="" v-if="tempImg" class="upimg">
                    <div style="padding: 20px 0px;" v-else>
                      <i class="ivu-icon ivu-icon-ios-cloud-upload"
                         style="font-size: 52px; color: rgb(51, 153, 255);"></i>
                      <p>请选择您要上传的文件</p></div>
                  </div>
                </FormItem>

vue代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
data(){
    return {
        tempImg:''
    }
},
methods: {
      // 间接调用文件选择框
      handelup(e) {
        this.$refs.filei.dispatchEvent(new MouseEvent('click'))
      },
      // 选择文件
      up(e) {
      	// 获取待上传的文件对象
        let file = e.target.files[0]
        // 声明一个读取文件对象
        let reader = new FileReader();
        // 开始读取文件内容
        reader.readAsDataURL(file);
        // 读取操作结束时触发
        reader.onloadend = (ev) => {
          // 赋值给vue对象属性
          this.tempImg = ev.target.result
        };
      },
}

总得来说就是使用vue的ref参数直接操作input的点击事件触发来先获取待上传文件对象，然后使用FileReader来读取文件，将文件内容赋值给vue属性tempImg，然后图片src绑定了这个属性，达到了选择图片后立即显示的效果。

关于FileReader详细说明及用法：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

结语：图片对象我们都获取到了，与数据一起提交还成问题吗？讲这个图片对象赋给vue属性，点击提交的时候，将数据属性与资源属性一起提交即可！