前端图片上传格式,本地图片路径打造略缩图以及上传进度条

前端上传图片到后台除了直接拿file还有formData以及base64格式

formData:

接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

const formData = new FormData()
formData.append('userpic[]', myFileInput.files[0], '1.jpg')

formData可以append多个值 所以是否多个文件一起上传给后端呢

base64

Base64是一组类似的二进制到文本编码模式 前端获取base64需要通过构造函数FileReader()获得,过程比较麻烦还是异步的

 const reader = new FileReader();
  reader.onload = function(evt) {
    console.log(evt.target.result);
  };
  reader.readAsText(file)

但是回调函数不是我们希望的 可以利用 promise封装一下 于是我跟着大佬学习了一下

return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = (e) => { resolve(e) }
            })

利用本地路径实现略缩图

上传图片之前用户总是要看到图片略缩图列表的,elementUI也有这样的功能,但是太丑了没法用,获取这个路径则是通过URL对象

fetchLocalImgUrl(file) {
           return window.URL.createObjectURL(file)  
        }

获取这个url赋值给img标签就能实现图片略缩图了

上传进度条

最难实现的就是实时进度条了,这个功能我也没能做出来,最后由大佬出马搞定,看完以后感到**惊为天人,茅塞顿开,醍醐灌顶,恍然大悟.**小弟佩服佩服
如何捕获上传或者下载的进度这个就得从前后端交互的核心对象XMLHttpReques的ProgressEvent接口说起了.在数据传输的过程中Xhr对象有提供Progress事件可以用于监测上传进度,以及load事件 传输完成，所有数据保存在 response 中。

const oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load" , transferComplete);
oReq.open();

// 服务端到客户端的传输进程（下载）
function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total * 100;
    // ...
  } else {
    // 总大小未知时不能计算进程信息
  }
}

function transferComplete(evt) {
  console.log("The transfer is complete.");
}

很可惜当我继续往下读文档的时候

贼心不死的我又把目光投向了axios,于是我找到了这样一行代码

// `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

嘿嘿,终于搞明白大佬这行代码啥意思了