uniApp 实现上传功能（七牛云，node获取上传token）

news2024/10/7 14:30:11

版本：uniApp+vue2+uview-ui
需求：利用uView_upload组件实现上传功能
难点：兼容性强，支持pc、App、h5；

1.使用leancloud 实现上传(兼容性弱)

JS-SDK 只兼容pc、h5，运行到虚拟机上会报错——uniApp问答详情；

伪代码如下：
main.js

//上传
import AV from "leancloud-storage";
Vue.prototype.$AV = AV

.vue文件

  methods: {
  	  getBase64(file) {
	      return pathToBase64(file)
	        .then(base64 => {
	          return Promise.resolve(base64)
	        })
	        .catch(error => {
	          console.error(error)
	          return Promise.reject(error)
	        })
    },
     async afterRead(event) {
	      let imgFrontFileUrl = await this.getBase64(event.file);
	      setTimeout(() => {
	        const fileRes = new this.$AV.File(event.file.name, {
	          base64: imgFrontFileUrl,
	        });
	        fileRes.save().then(
	          (res) => {
	            console.log("上传数据！！！", res)
	          }, (error) => {
	            console.log(error);
	          }
	        );
	      }, 0)
    },
  }

2.使用七牛云实现上传(兼容性强)

兼容性强；
提供node-SDK实现上传token的方法（因为后端没有给接口没有，需要自己动手丰衣足食！！）；

node-SDK获取上传token具体实现

依赖：
“body-parser”: “^1.20.2”,
“cors”: “^2.8.5”,
“express”: “^4.18.2”,
“qiniu”: “^7.8.0”
目录结构：

upload.js

const qiniu = require('qiniu')

// 创建上传凭证（accessKey 和 secretKey在七牛云个人中心中有，lytton是七牛云刚才创建的空间名称）
const accessKey = '' //你自己七牛的密钥
const secretKey = '' //你自己七牛的密钥
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: '', //这是你创建存储空间的名字
  // deadline: 40000 //这是七牛云生成token的有效期，单位时秒，不设置默认是3600S，一串数字是时间戳
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken  //导出的是七牛云生成的token，很重要
}

api.js——执行脚本命令：node api

const uploadToken = require("./upload.js");
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.json());
app.use(cors());

// 定义GET请求的路由
app.get('/getQniuToken', (req, res) => {
  console.log(req.body);
  res.send({
    code: 200,
    data: uploadToken.uploadToken,
    messages: '获取成功'
  }
  );
});
// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

使用七牛云实现上传功能

.vue文件

  methods: {
     async afterRead(event) {
	   uni.request({
        url: 'http://node获取上传token的服务地址/getUploadToken',
        method: 'GET',
        success: (res) => {
          this.token = res.data.data
          uni.uploadFile({
            url: 'https://自己的七牛云地址',
            filePath: event.file.url,
            name: 'file',
            formData: {
              'key': Math.round(new Date() / 1000) + '',
              'token': this.token
            },
            success: (res) => {
              let data = JSON.parse(res.data);
              let ImgUrl = uploadUrl + data.key
              let obj = {
                name: event.file.name,
                uid: data.hash,
                url: data.key,
                thumbUrl: data.key,
              }
            }
          })
        },
        fail: function () {
          this.$refs.uToast.error('上传失败，请重新上传！')
        }
      })
  }