uni-app 上传图片到七牛云

我的流程是：在上传图片到七牛之前，先调后端提供的接口获取token、key等，然后通过uni.uploadFile把token、key传给七牛；
token：从后端获取的token值；
key：这里需要做一下拼接（获取的文件名前缀+唯一码或者时间戳），唯一码：这里贴上大佬的链接：唯一码链接；时间戳的话自己加上即可。

调后端接口获取token、key等值；

this.axios.request({url: `/file/storeToken`,method: 'GET',
}).then(res => {if (res.data.data) {let uploadMsg = res.data.data;// 唯一码let uniqueCode = generateUUID();}
}).catch(err => {console.log(err);
})

从本地选择图片

uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: function (chooseImageRes) {console.log(chooseImageRes.tempFilePaths);}
});

上传图片到七牛云（注意：这里要把url换成七牛的！！！）

最后，附上完整代码

// 上传图片
onUpload() {uni.chooseImage({count: 9, // 默认9sizeType: ['compressed', 'original'],sourceType: ['album', 'camera'],success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;this.axios.request({url: `/file/storeToken`,method: 'GET',}).then(res => {if (res.data.data) {let uploadMsg = res.data.data;let uniqueCode = generateUUID();uni.uploadFile({url: 'https://up.qbox.me',filePath: tempFilePaths[0],name: 'file',formData: {'key': uploadMsg.keyPrefix + uniqueCode,'token': uploadMsg.upToken},success: (uploadFileRes) => {let key = JSON.parse(uploadFileRes.data).key;let partImgUrl = uploadMsg.prefix + key;this.partImgList.push({imgUrl: partImgUrl})},fail: (err) => {console.log('fail', err);}});}}).catch(err => {console.log(err);})}});
}

值得注意的一点是：按照常理来说uni.chooseImage()应该在调接口之后，但是如果把uni.chooseImage()放在接口成功回调里面，你会发现调不起来选择图片的方法，两个操作换下位置就ok了。
我在chrome浏览器操作是正常的，但是这个项目需要兼容QQ浏览器，所以出现了这个问题，如果不需要QQ浏览器的话可以不用这么操作。

如有错误或不足，欢迎各位大佬评论指正。

uni-app 上传图片到七牛云相关推荐

小程序上传图片到七牛云
小程序上传图片到七牛云一.创建七牛云账号,获取ak.sk,创建对象存储空间名称二.服务端接口获取七牛token值,个人使用的php编写的 ...
前端上传图片到七牛云
前端如何上传图片到七牛云流程: 1.七牛云后台的对象存储功能 2.node.js后台生成七牛云的token 3.前端利用element UI/ice 的upload组件 4.文件名和token作为参 ...
React中：富文本编辑器(react-quill),自定义上传图片到七牛云
1.组件封装 import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-qui ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
实现Java+Vue上传图片到七牛云和从七牛云删除图片
环境准备开发环境后端: JDK1.8, SpringBoot2.2.2.RELEASE, Maven3.6.3 前端: vue-element-admin4.4.0 相关链接七牛云JavaSDK ...
前端如何上传图片到七牛云
From: https://www.jianshu.com/p/7520e0bee777 前端如何上传图片到七牛云流程: 生成token => token和图片作为new FromData() ...
html5七牛图片上传js,前端如何上传图片至七牛云
上传文件是我们在前端开发中经常遇到的一个问题.最近在做某项目管理后台的时候,需要将轮播图上传至七牛云.以前在Vue里面做过类似的功能,但是在Angular中使用同样的方法发现行不通. 此篇文章主要介绍 ...
koa2 + vue上传图片到七牛云
1.首先安装插件 koa-multer 用于上传图片和qiniu. npm install --save koa-multer npm install --save koa-qiniu 2.新建文件q ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...

uni-app 上传图片到七牛云

uni-app 上传图片到七牛云

uni-app 上传图片到七牛云相关推荐

最新文章

热门文章