js实现图片上传-以及获取图片宽高、大小获属性

前言：作为前端开发人员，避免不了上传一些文件和图片，那么什么格式需要前端后协商，同时考虑实施性，能否最有效和最合适取决于格式。自己总结了一下，如果错误欢迎指正！

文件图片上传

1、利用FormData图片/文件上传-----以文件的形式上传

//上传单个文件
upLoadFile(event) {
​        let file = event.target.files;
​        let _this = this
​        let formData = new FormData();
​        formData.append('file', file[0]);
    //如果是图片 formData.append('image', file[0]);
    //这里的image只是类似对象属性名称一样，看接口需要什么放什么，但是图片也是一个文件，以文件的形式上传
​        


//上传多个文件
upLoadFile(event) {
​        let file = event.target.files;
​        let _this = this
​        let formData = new FormData();
​        for (let i = 0; i <= file.length - 1; i++) {
​          formData.append('files', file[i]);
    //如果是图片 formData.append('images', file[i]);
​        }

如图所示，图片以文件的形式上传（binary）(其他参数我没有在代码中体现)

<input type="file" class="upload_inp" @change="fileupload($event)" />
	
	fileupload(event){
		let file = event.target.files[0];
		let formData = new FormData();
		formData.append("files", file);
		formData.append("Id", this.Id);
		formData.append("name", this.name);
		this.$axios
        .post(
          `/xxxxx/aaaaa/bbbbb`,
          formData,
            //{
            // headers: {
            //        "Content-Type": "multipart/form-data"
            //   	},
            //}
            //这里请求头加不加看自己情况，浏览器默认是有的，但是特殊情况也不是没有
        )
        .then(res => {
          this.getList();
        });
	}

这样id和name和文件一起传给后端了

2、图片上传--------以base64格式上传

 upLoadImg(e) {
​        let _this = this
​        let reader = new FileReader();
​        let file = e.target.files[0];
​        if (file) {
​          if (file.size > 102400) {//直接拿到文件的大小（图片也是文件）
​            alert("请上传100KB以下的照片")
​          } else {
​            reader.readAsDataURL(file);//解析文件以base64的形式
​            reader.onload = function (e) {
​              _this.thumbnail = reader.result //base64格式
​            }
​          }
​        }
​      },

3、图片上传---------以二进制的形式上传

upLoadImg(e) {
    let file = this.files[0];
        let reader = new FileReader();
        reader.readAsArrayBuffer(file);//按照字节读取文件并存储至二进制缓存区
        reader.onload = function (e) {
          let result = e.target.result;
           let blob = new Blob([result]);//存储二进制数据
          // let url = URL.createObjectURL(blob);//生成本地图片地址用于图片预览
        }
}

42、文件/图片的大小

 upLoadImg(e) {
                let file = e.target.files[0];//单个文件处理
                if (file) {
                  let size=file.size//字节单位
                  }
 }

文件的大小获取，主要是前端自定义限制上传图片或者文件的大小，做出提醒！

43、图片的宽高获取

// 图片地址
var img_url = ‘13643608813441.jpg'
// 创建对象
var img = new Image()
// 改变图片的src
img.src = img_url
// 打印
alert('width:'+img.width+',height:'+img.height);

对于特殊要求，比如宽高必须是.2的幂次方，这样就可以拿到宽高做一个判断提醒限制！