H5上传图片及预览

      <input type="file" @change="fileChange($event)" 
                                  style="display: none"
                                  multiple="multiple"
                                  accept="image/gif,image/jpeg,image/jpg,image/png">
  <img :src="avatar" alt="">
data () {
    return {
      avatar: ''
    }
  },
// 本地预览和上传
    fileChange (e) {
      let file = e.target.files[0];
      if(file) {
        this.file = file
        console.log(this.file)
        let reader = new FileReader()
        let that = this
        reader.readAsDataURL(file)
        reader.onload= function(e){
          // 这里的this 指向reader
          that.avatar = e.target.result
        }
      }
      let form = new FormData()
      form.set('file', file)
      form.set('token', this.token)
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      axios.post(`${process.env.API_HOST}/qianbomall/app/reg/uploadObject`, form, config).then((res) => {
        console.log(res)
      })
    },

<!--多图上传的话-->
this.fileArr.forEach((file, i)=> {
        formData.append('file'+ i, file)
})

直接获取整个form 并转成foramData(没有试过)

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

上传视频的预览

const file = this.$refs.input.files[0]
this.videoSrc = this.getFileURL(file)


getFileURL (file) {
      let getURL = null
      if (window.createObjectURL !== undefined) {
        getURL = window.createObjectURL(file)
      } else if (window.URL !== undefined) {
        getURL = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        getURL = window.webkitURL.createObjectURL(file)
      }
      return getURL
    }