前端文件上传

2021-10-13  本文已影响0人  程序_影子

文件上传分为两步:一、获取文件内容。二、请求接口,将内容放在 body 中发送给后端

一、获取文件内容

上传页面如下
<input type="file" @change="fileChange">
 进度:<span id="progress"></span>
js代码:读取当前上传的文件内容用于展示或其他用途
fileChange (e) {
      const progress = document.getElementById('progress')
      const files = e.target.files
      if (files.length > 0) {
          const file = files[0] // 当前操作的文件对象
          const reader = new FileReader()
          if (/text+/.test(file.type)) {
              // text类型
              reader.readAsText(file, 'utf-8')
          } else if (/image+/.test(file.type)) {
              // image类型
              reader.readAsDataURL(file)
          }
          // 读取完成,可以做数据处理
          reader.onload = function () {
              console.log(this.result) // 文件内容
          }
          // 上传进度
          reader.onprogress = ev => {
              if (ev.lengthComputable) {
                  progress.innerHTML = ev.loaded / ev.total
              }
              console.log(ev.total) // 总大小
              console.log(ev.loaded) // 已经上传的大小
          }
      }
  }
这里用到了FileReader类来读取文件,下面简单介绍一下FileReader类的属性和方法
FileReader读取文件方法如下:
PS: 以上读取到的结果都会保存在result属性中,如果读取失败,则 result 的值为 null ,否则即是读取的结果。
FileReader的事件如下:

二、将内容通过接口上传至后端

示例:

fetch("http://xxxx.xxx", { // 发起请求
      method: "post",
      body: fileData,
      Headers: {
        "X-CSRFToken": "xxxxxx", // 与后端商量好的请求头
        "......": "......"
      }
    }).then(res => {
      if (res.status !== 200) {
        console.log("上传失败", res)
      } else {
        console.log("上传成功", res)
      }
    })

注意事项:

fileChange (e) {
     const file = e.target.files[0]
     const formData = new FormData();
     formData.append('file', file)
     // 这只是个简单的例子
      reqwest({
        url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        method: 'post',
        data: formData,
        success: () => {
            // 成功
        },
        error: () => {
            // 失败
        },
      })
}
上一篇下一篇

猜你喜欢

热点阅读