上传图片 原生或vant

一 css

1.原生

<input type="file" @change="changeImage" />

 

2 vant

<van-uploader :after-read="changeImage"></van-uploader>

(after-read,before-read,before-delete 类似三个钩子函数)

 

二 js

post请求时，upfile 的位置不要加 { } 会造成传值错误

changeImage(e) {
      //vant 的file路径
      //var fil = e.file

      // 原生 file路径
      var fil = e.target.files[0]

      var upfile = new FormData(); //创建form对象
      upfile.append("upfile", fil); //通过append向form对象添加数据第一个参数字符串与后端约定，第二个根据对象属性来找到file
      this.$http
        .post("/url/xx/xx", upfile, {
          headers: {
            "Content-Type": "multipart/form-data" //添加请求头
          }
        })
        .then(res => {
          window.console.log(res);
        })
        .catch(err => {
          window.console.log(err);
        });
    },