vue选择图片的几种方式

后台有上传图片功能，用了好几次还是还是没记住，每次都要上网找，索性写一下方法

一、 输出 base64 格式

这个可以在前端显示

html：
<input type="file" name="" id="" accept="image/jpeg,image/jpg,image/png" @change="changeImage" />
<img :src="url" width="200" height="200">
js：
data(){
	return{
		url:""
	}
},
methods:{
	changeImage(e){
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      console.log(reader)
      reader.onload = function(e) {
        that.url = this.result;
      };
	}
}

选择前：

选择后：

url 为 base64 格式：

二、输出 FormData 格式

我是用这个向后端传输，这个看不到 url 或者 base64，因此无法用此方法在前端显示选中图片

html：
<input type="text" placeholder="请输入名称" v-model="name" />
<input type="file" name="" id="" accept="image/jpeg,image/jpg,image/png" @change="changeImage" />
<button @click="confirm">提交</button>
js：
data(){
	return{
      name: "",
      formData: "",
	}
}
methods:{
	//选中图片时，创建FormData对象，将图片添加进去，并赋给data里面的formData方便提交
    changeImage(e) {
      var file = e.target.files[0];
      var formData = new FormData();
      formData.append("file", file);
      this.formData = formData;
    },
    //提交时将name参数添加进去，有其他参数再添加其他参数，然后调用接口即可
    confirm() {
      this.formData.append("name", this.name);
      this.$axios.post(url, this.formData).then((res) => {
        console.log(res);
      });
    },
}

之所以说没办法将选中图片在前端页面显示，是因为选中后的 formData 对象输出是这样的

也可能是我不会取，有知道的大佬可以补充一下

❀❀❀❀❀❀ 完结散花 ❀❀❀❀❀❀

Written ❤️ sywdebug.