美文网首页
开发中遇到的问题

开发中遇到的问题

作者: cyokin0324 | 来源:发表于2023-10-30 10:39 被阅读0次

    1.vue3中的reactive不会自动更新视图,可以在reactive里多添加一层属性
    2.echarts中封装组件会公用同一个id的元素,可以在封装组件时多传入一个id
    3.echarts在初次渲染时不会显示,报警告,未获取宽高,需要在初始化表格时添加配置宽高。

    vue中遇到的问题

    1.设置下载pdf浏览器会预览问题
    此方法也可解决下载时的名称问题

    //fileName是pdf名称 、filePath是pdf地址
    downloadFile_2(fileName, filePath) { 
      var ajax = new XMLHttpRequest()
      ajax.open('GET', filePath, true)
      ajax.setRequestHeader('Cache-Control', 'no-cache')
      ajax.setRequestHeader('Access-Control-Allow-Origin', '*')
      ajax.responseType = 'blob'
      ajax.onload = (e) => {
        console.log(e)
        let res = e.target.response
        // let blob = new Blob([res],{type: "application/pdf;charset=UTF-8"}) // 这里的res为后端返回的流数据
        let blob = new Blob([res])
        let aLink = document.createElement('a')
        aLink.download = `${fileName}.pdf` // 下载文件的名字
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
      }
      ajax.send()
    },
    

    2.前端上传文件慢
    使用OSS上传

    
    async function uploadOss(file, callback) {
      // 根据文件名后缀,获取contentType
      const contentType = getContentType(file.name)
      // 调用授权接口,获取到上传地址
      const res = await axios({
        headers: { 'X-GW-AccessKey': window._env_.accessKey },
        method: 'post',
        url: getOssAuth,
        data: { fileName: file.name, contentType },
      })
      // oss返回结果
      const result = res && res.data && res.data.data
      if (result) {
        // 根据oss授权返回的地址,上传文件
        let reader = new FileReader()
        return new Promise((resolve, reject) => {
          reader.readAsArrayBuffer(file)
          reader.onload = async (e) => {
            // 将File对象通过FileReader读出转换为Blob二进制流对象
            const blob = new Blob([e.target.result])
            // 调用上传
            const response = await axios({
              headers: result.uploadHeaders,
              method: result.requestMethod,
              url: result.serviceUrl,
              data: blob,
              onUploadProgress: (progressEvent) => {
                // 原生获取上传进度的事件
                if (progressEvent.lengthComputable) {
                  callback && callback(progressEvent)
                }
              },
            })
            const responseCode = response && response.status
            // 201代表上传成功
            if (responseCode == 201) {
              let fileUrl = result && result.fileUrl
              const index = fileUrl.lastIndexOf('/')
              const fileName = fileUrl.substring(index + 1)
              // 如果是word或者excel,对url做个编码
              const fileType = getFileType(fileName) && getFileType(fileName)[0] // ['word','docx']这种格式
              fileUrl = fileType == 'word' || type == 'excel' ? encodeURIComponent(fileUrl) : fileUrl
              const data = {
                fileName,
                fileUrl,
                fileType,
              }
              resolve(data)
            }
            return false
          }
        })
      }
      return false
    }
    

    小程序中的问题

    1.scroll-view enable-flex不生效
    解决方案:父级设置white-space:nowrap 子级设置:display:inline-block

    相关文章

      网友评论

          本文标题:开发中遇到的问题

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