原生Input上传文件到七牛

最新推荐文章于 2023-05-06 15:23:51 发布

码农小权权

最新推荐文章于 2023-05-06 15:23:51 发布

阅读量149

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40280730/article/details/119821159

版权

				<input
                    type="file"
                    class="upload_input"
                    ref="upFile"
                    @change="fileChange(e, scope.row)"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                  />


.......................................
 fileChange (e, val) { // 上传
 	//获取文件
      let evt = e || event
      let that = this
      let file = evt.target.files[0]
      console.log(evt, val)
      let strList = file.name.split('.')
      let fileType = strList[strList.length - 1]
      //获取七牛的token和key
      this.$http.cloudGetToken(51, fileType).then(res => {
        if (res.status == 1) {
          this.uploadFile(file, res.result, val)
        }
      })
    },
    uploadFile (file, { uptoken, fileKey }, val) {
      const fd = new FormData()
      fd.append('token', uptoken)
      fd.append('key', fileKey)
      fd.append('file', file)
      var xhr = new XMLHttpRequest()
      var that = this
      //向七牛发送请求
      xhr.open('POST', '七牛的地址', true)
      return new Promise(resolve => {
        xhr.onload = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
            //获取七牛返回的文件信息
              var data = JSON.parse(xhr.responseText)
              console.log(data, 'data')
              if (data.result.w > 128 || data.result.height > 128) {
                that.$Message.error('图片大小超过128*128！')
                return
              }
              //向后台发送请求
              let params = {
                normId: val.id, fType: that.typeList[that.typeIndex].type, schoolCode: that.user.schoolCode, imgUrl: data.result.url
              }
              console.log(params)
              that.$cloudRequest('/sxxxxx/xxxxxxx/xxxxxx', params, 'get').then(res => {
                if (res.status == 1) {
                  console.log(data)
                  val.icon = data.result.url
                  console.log(val, 'val')
                }
              })
            } else {
              console.log(xhr.statusText)
            }
          }
        }
        xhr.onerror = function (e) {
          console.log(xhr.statusText)
        }
        xhr.send(fd)
      })
    }

                  ```