博客

调用接口获取到七牛云的token（参数什么都不用传，但是这个后端接口的网址和之前的不一样），这个token上传七牛云需要用到。

需要axios和qiniu-js的插件 ，然后是上传七牛云的操作。

最后将七牛云返回的数据和七牛云的线上网址拼合起来就是图片的网址。

然后将这个图片网址当作参数调用后端接口，后端会将身份信息返回来

            let that = this
            const qiniuUploadInfo = {
                file: file.file, //文件对象
                key: file.file.name, //文件资源名称
                token: this.token, //从后端获取的uplodaToken
            }
            const putExtra = {
                fname: file.file.name, // 文件原文件名
                params: {}, // 用来放置自定义变量
                mimeType: null // 用来限制上传文件类型，为 null 时表示不对文件类型限制；eg: ["image/png", 	  "image/jpeg"]
            }
            const config = {
                useCdnDomain: true,//cdn加速
                // region: qiniu.region.z2 //区域
            }
            const observable = qiniu.upload(
                qiniuUploadInfo.file,
                qiniuUploadInfo.key,
//`images/${qiniuUploadInfo.key}`,   上传到指定文件路径的写法
                qiniuUploadInfo.token,
                putExtra,
                config
            )
            //上传开始
            observable.subscribe({
                next(res) {
                    console.log('next', res)
                },
                error(err) {
                    console.log('err', err)
                },
                complete(res) {//来到这里就是上传成功了。。
                    if (that.fileList.length == 0) {
                        that.fileList.push({ url: that.QINIU_OSS_BASE + res.key });
                    } else {
                        that.fileList = []
                        that.fileList.push({ url: that.QINIU_OSS_BASE + res.key });
                    }
                    that.profile_picture = that.QINIU_OSS_BASE + res.key
                    console.log('complete', res, that.profile_picture);

                    that.get_Idcard(that.QINIU_OSS_BASE + res.key);

                }
            })

2023.6.20更新

elementui框架使用自定义上传方式上传（前端直接上传到七牛云，不通过后端接口上传，目的是节省资源性能）最主要的是要用这个httpRequest，否则上传速度会很慢，具体什么原理也不清楚

  // 视图部分
 <el-upload v-else class="upload-demo" drag :file-list="picfileList" ref="aaa" :limit="1"
                action="https://jsonplaceholder.typicode.com/posts/" :http-request="httpRequest" :on-change="handleChange"
                :on-success="uploadRequest" :before-remove="handleRemove" style="margin:20px;width:600px">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip">只能上传{{ switchData.accept }}文件</div>
              </el-upload>



// 逻辑代码部分，最主要的两个方法
    handleChange(file, fileList) {       //获取到上传文件的信息
      this.file = file
      this.$refs.aaa[0].submit();
    },

    httpRequest() {                       //自定义上传 类型判断"image/*"  audio/mpeg
      this.is_upload = true
      let file = this.file.raw; 
      let that = this
      that.uploadBtnDis = true
      let isAccept;
      isAccept = new RegExp(this.switchData.accept).test(file.type)
      if (isAccept) {
        this.loading = this.$loading({
          lock: true,
          text: '上传中请稍等......',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        });
        const qiniuUploadInfo = {
          file: file, //文件对象
          key: file.name, //文件资源名称
          token: this.token, //从后端获取的uplodaToken
        }
        const observable = qiniu.upload(
          qiniuUploadInfo.file,
          `${that.fileName}${qiniuUploadInfo.key}`,
          qiniuUploadInfo.token,
          {
            fname: file.name, // 文件原文件名
            params: {}, // 用来放置自定义变量
            mimeType: null // 用来限制上传文件类型，为 null 时表示不对文件类型限制；eg: ["image/png", 	  "image/jpeg"]
          },
          {
            useCdnDomain: true,//cdn加速
            region: qiniu.region.z1 //区域
          })

        //上传开始
        observable.subscribe({
          next(res) {
            // console.log('next', res)
          },
          error(err) {
            console.log('err', err)
          },
          complete(res) {//来到这里就是上传成功了。。 
            that.loading.close();
            that.picfileList.push({ name: res.key, url: that.base.OssAddressUrl + res.key });
            console.log(res, this.is_upload, '来到这里就是上传成功了', that.picfileList)
            that.uploadBtnDis = false
          }
        })
      } else {
        this.$message.error(`应该选择${this.switchData.accept}类型的文件`);
        return false;
      }
    },