后台：七牛云上传图片，视频，文件

vue方式

上传图片（通过base64进行上传图片）

<div  id="myDiv"></div><script>let base64 = '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'function putb64() {var pic = base64;var url = "http://upload-z2.qiniup.com/putb64/1691"; //非华东空间需要根据注意事项 1 修改上传域名var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {document.getElementById("myDiv").innerHTML = xhr.responseText;}}xhr.open("POST", url, true);xhr.setRequestHeader("Content-Type", "application/octet-stream");xhr.setRequestHeader("Authorization", "UpToken 6xFDwCr_0C-YDvNLcjuHSGM9G9AVe5DD5JcWOLME:ysk65ufYWCcQEtv8AqZo1R_1ljA=:eyJzY29wZSI6InRlc3QteHEwMDciLCJkZWFkbGluZSI6MTYyMDI0NDQxNX0=");xhr.send(pic);}putb64();</script>

上传视频
参考链接

<el-uploadref="upload"action="http://upload.qiniup.com":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":auto-upload="true":limit="1":data="form"
><el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

async beforeAvatarUpload(file) {const fileType = file.typeconst current = new Date().getTime()const key = `video_${current}` // key为上传后文件名 必填const isLt20M = file.size / 1024 / 1024 < 20 // 算出文件大小this.fileSize = file.size // 存储文件大小if (!isLt20M) { // 这里我们限制文件大小为20Mthis.$message.error('最大只能上传20M!')this.$ref.upload.abort()return isLt20M}if (fileType !== 'video/mp4') { // 限制文件类型this.$ref.upload.abort()this.$message.error('只能上传MP4格式视频!')return false}try {const token = await this.getPicToken()this.form = {key,token,}return true} catch (error) {return error}
},

js原生方式 (任意文件 video image txt等等)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="//unpkg.com/layui@2.6.4/dist/css/layui.css"><script src="//unpkg.com/layui@2.6.4/dist/layui.js"></script>
</head><body><div id="container"><input type="file" onchange="upload(this)"><button class="layui-btn" type="button" id="startUpload">开始上传</button></div><script src="https://cdn.bootcdn.net/ajax/libs/qiniu-js/2.2.1/qiniu.min.js"></script><!-- <script src="./js/qiniu.min.js"></script> --><script>var files = ''var type = ''var fileName = ''function upload(obj) {files = obj.files[0];console.log(files)type = files.typeconsole.log(type)fileName = files.name}let token = '6xFDwCr_0C-YDvNLcjuHSGM9G9AVe5DD5JcWOLME:Zg-KW8NSqb79XElKhZO_B4NcRWQ=:eyJzY29wZSI6InRlc3QteHEwMDciLCJkZWFkbGluZSI6MTYyMDU3NzYxOX0='document.getElementById('startUpload').onclick = function () {const observable = qiniu.upload(files, null,token, {fname: fileName,// mimeType: "text/plain",mimeType: type,customVars: { 'x:test': 'qiniu', bucket: 'test-xq007' },metadata: { 'x-qn-meta': 'qiniu', Authorization: 'Qiniu ' + token },}, {useCdnDomain: true,region: qiniu.region.z2})const subscription = observable.subscribe({next(res) {// ...console.log('next...', res)},error(err) {// ...console.log('error...', err)},complete(res) {// ...console.log('complete...', res)}})};</script>
</body></html>

后台：七牛云上传图片，视频，文件相关推荐

七牛云音视频文件并转码、添加水印官方示例
七牛云音视频文件并转码.添加水印官方示例 java-sdk:https://github.com/qiniu/java-sdk/blob/master/examples/upload_pfops.ja ...
七牛云上传图片和视频
先说本文主要的重点: 七牛云上传图片(包括从相机获取的和从相册获取的) 七牛云上传视频 8.0手机调起相机都会进行描述多图片和多视频上传获取图片后缀 ...
七牛云上传文件之表单上传文件
本人愚钝,七牛云上传文件的开发说明文档看了好久才搞懂,才能完成一个实例跑起来.现在做一下总结. 1.注册七牛,新建一个bucket,并获得ak,sk这个不用说了.不涉及到程序编码,重点讲一下编码的流程 ...
七牛云上传图片到七牛云并返回图片URL
七牛云上传图片到七牛云并返回图片URL 鸣谢'追逐盛夏流年':https://blog.csdn.net/j1231230/article/details/80061834 在开发项目的时候,经常会 ...
springboot+vue实现七牛云上传图片功能
1.需求描述用户发布帖子,需要用到上传图片功能,并进行图片回显. 2.环境前端:uniapp + uview1.8 后端:springboot 2.5.13 3.具体流程用户在前端上传图片后,交 ...
Java实现七牛云上传图片、读取图片链接
Java后端实现七牛云上传图片.读取图片链接添加依赖 <dependency><groupId>com.qiniu</groupI ...
python对接七牛云上传图片代码,可运行
python对接七牛云上传图片,可运行一.准备工作注册七牛云获取: 1.Access Key(注册认证后自动生成) 2.Secret Key(注册认证后自动生成) 3.空间名称:ihome(创建空 ...
uni-app 七牛云上传文件
关注我的哔哩哔哩哦 https://space.bilibili.com/309103931 哔哩哔哩文章链接https://www.bilibili.com/read/cv5072498 七牛云上传 ...
使用七牛云上传图片时出现Network error during preQuery和运行时出现okhttp的问题
问题描述 1.使用七牛云上传图片时出现Network error during preQuery,但网络正常原因分析:排除网络原因,尝试网络配置方向调整 Configuration configur ...
七牛云上传图片报错处理
{ResponseInfo:com.qiniu.http.Response@62bd765,status:400, reqId:d4kAAACMt2hWMSEW, xlog:X-Log, xvia:, ...

后台：七牛云上传图片，视频，文件

后台：七牛云上传图片，视频，文件相关推荐

最新文章

热门文章