Vue：多文件上传并预览

多文件上传预览基本思路

1、获取所上传的文件，input发生change事件时获取 e.target.files，这个变量就是文件列表

2、文件上传用的时FormData格式，这里我循环遍历了文件列表，并把文件append到FormData对象里

3、提交时把FormData对象提交到服务器即可

4、预览功能我用的FileReader的readAsDataURL方法将上传图片转为base64

5、读取操作是异步读取，这里用了Promise，读取操作完成后，触发onload事件，返回一个resolve状态并带上base64编码的字符串

6、将base64这串字符赋给img元素的src，即可预览图片

template：

<input type="file" multiple @change="upload" /><br />
<img v-for="item in previewUrl" :src="item" width="100" /><br />
<button type="button" @click="submitFile">submitFile</button>

js

	data () {
	 return {
	   previewUrl: [],
	   formData: undefined
	 },
     methods: {
      preview (file) {
      // 获取预览图片的base64
        return new Promise((resolve, reject) => {
          let read = new FileReader()
          read.readAsDataURL(file)
          read.onload = function(e) {
            resolve(this.result)
          }
        })
      },
      upload (e) {
      // 选择图片后触发，将文件放到 formdata 对象里
        this.previewUrl = []
        const files = e.target.files
        const that = this
        this.formData = new FormData()
        console.log(files)
        for(let file of files){
          this.formData.append('file', file)
          this.preview(file).then(res => {
            that.previewUrl.push(res)
          })
        }
        console.log(this.formData.getAll('file'))
      },
      submitFile (file, fileList) {
      // axios将数据发送到服务器
        let setting = {
          url: 'http://localhost:3000/uploadfile',
          method: 'post',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: this.formData
        }
        this._axiosMock(setting).then(res => {
          console.log(res)
        })
      }
    }

最后

以上就是成就裙子为你收集整理的Vue：多文件上传并预览的全部内容，希望文章能够帮你解决Vue：多文件上传并预览所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。