前言：作为前端开发人员，避免不了上传一些文件和图片，那么什么格式需要前端后协商，同时考虑实施性，能否最有效和最合适取决于格式。自己总结了一下，如果错误欢迎指正！
文件图片上传
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()// 改变图片的srcimg.src = img_url// 打印alert('width:'+img.width+',height:'+img.height);
对于特殊要求，比如宽高必须是.2的幂次方，这样就可以拿到宽高做一个判断提醒限制！
