美文网首页
前端文件上传

前端文件上传

作者: 程序_影子 | 来源:发表于2021-10-13 16:48 被阅读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读取文件方法如下:
    • readAsText(file, encoding):将文件读取为文本,其中第二个参数是文本的编码方式,默认值为 UTF-8
    • readAsDataUrl(file): 将文件读取为DataURL
    • readAsBinaryString(file): 将文件读取为二进制字符串
    • readAsArrayBuffer(file): 将文件读取为ArrayBuffer
    PS: 以上读取到的结果都会保存在result属性中,如果读取失败,则 result 的值为 null ,否则即是读取的结果。
    FileReader的事件如下:
    • onloadstart: 开始
    • onprogress: 正在读取,每隔50ms左右,会触发一次progress事件
    • onload: 读取成功
    • onloadend:读取完成,无论成功失败
    • onerror: 读取出错

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

    示例:

    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)
          }
        })
    

    注意事项:

    • 方法一般为POST
    • Headers: 一般为用户信息的验证,所需字段需要与后端约定好
    • body:上传的文件数据,一般为文件对象,即file。有时需要FormData 类型的,就转一下:
    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: () => {
                // 失败
            },
          })
    }
    

    相关文章

      网友评论

          本文标题:前端文件上传

          本文链接:https://www.haomeiwen.com/subject/bjqeoltx.html