vue原生js上传图片示例

文件上传是我们日常开发的常见需求，在以前IE时代，跨域上传很是麻烦，会用到iframe作为中转，现在方便多了，直接Nginx配置下CORS跨域，把文件流post给后端接口，后端完成文件接收和保存后，返回文件的服务端存储路径给我们。

技术要点：

• 触发文件选择控件的change事件dispatchEvent(new MouseEvent('click') 因为我们一般都会对原生file input做隐藏处理，用设计给的按钮触发选择文件动作
• 读取选择后的文件e.target.files
• 利用FileReader对象读取图片base64进行预览
• 利用FormData对象上传

代码如下：

<template>
<div>
  图片文件上传test
  <div>
    <input style="opacity: 0.3;" ref="filElem" type="file" accept="image/*" @change="changeFile($event)">

    <br><button type="button" @click="changeImg">按钮选择图片</button>
    
    <br><img height="200" :src="imgsrcLocal">
    <br><img height="200" :src="imgsrcServe">
    
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      imgsrcLocal: '',
      imgsrcServe: null
    }
  },

  methods: {
    // 触发file input
    changeImg() {
      this.$refs.filElem.dispatchEvent(new MouseEvent('click'))
    },
    
    changeFile(e) {
      console.log(this.$refs.filElem.value)
      console.log(e.target.value)
      let file0 = e.target.files[0]
      console.log(file0)

      // 文件预览
      const reader = new FileReader();
      reader.readAsDataURL(file0);
      console.log(reader)
      reader.onload = (img) => {
        this.imgsrcLocal = img.target.result;
      }

      const formData = new FormData();
      formData.append('file', file0)

      this.$axios({
        method: "POST",
        url: "/v1/uploadFile",
        //"content-type": "application/json;charset=UTF-8",
        withCredentials: true,
        data: formData
      }).then(res => {
        console.log(res)
        this.imgsrcServe = res.data.src
      }).catch(err => {
        console.log(err)
      })

    }
  }
}
</script>