使用vue框架直接上传文件到七牛云的过程
前段时间刚好做到这个需求在这里记录一下希望能帮助到大家!首先可以先看看七牛云的开发者中心:七牛云开发中心我这里是使用vue3.x+ts框架开发的按照文档所说我们需要先安装一下七牛云的SDKnpm install qiniu-js然后在页面上引入:const qiniu = require('qiniu-js')// orimport * as qiniu from 'qiniu-js'使用的是an
·
前段时间刚好做到这个需求在这里记录一下希望能帮助到大家!
首先可以先看看七牛云的开发者中心:七牛云开发中心
我这里是使用vue3.x+ts框架开发的
按照文档所说我们需要先安装一下七牛云的SDK
npm install qiniu-js
然后在页面上引入:
const qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'
使用的是antd的上传组件:(我给封装起来了:UploadDragger)
<a-drawer width="60%" title="上传文件" v-model:visible="ShowUpload">
<UploadDragger :key="uploadTimers" @onchangUpload="onChangUploadDragger" />
<div class="drawer_footer">
<a-button :disabled="pageLoading" type="primary" @click="ConfiromUpload">确定</a-button>
<a-button :disabled="pageLoading" @click="ShowUpload = false">取消</a-button>
</div>
</a-drawer>
UploadDragger组件:
<template>
<div class="UploadDragger">
<a-upload-dragger
v-model:fileList="fileList"
name="file"
:multiple="true"
:before-upload="() => {return false}" <!--加上这个上传不写action才不会报错并且能拿到file -->
@change="handleChange"
>
<p class="ant-upload-drag-icon">
<img src="@/assets/images/afferent.png" alt="传入" srcset="" />
</p>
<p class="ant-upload-text">将文件拖至此处,或点击上传</p>
<p class="ant-upload-hint">
仅支持 word/ecxcel/ppt /jpg png/mp4/mp3/rar/zip 格式
</p>
</a-upload-dragger>
</div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from 'vue';
interface FileItem {
lastModified: string|undefined;
uid: string;
name?: string;
status?: string;
response?: string;
url?: string;
}
interface FileInfo {
file: FileItem;
fileList: FileItem[];
}
export default defineComponent({
emits:['onchangUpload'],
setup(props, { emit }) {
//获取当前组件实例对象(类似this)
const { proxy }: any = getCurrentInstance();
const fileList = ref([]);
/**
* 上传触发获取上传文件数据事件
* @info 上传的文件数据
* */
const handleChange = (info: FileInfo) => {
// console.log(info)
let find = false; // 校验字段
for (let i = 0; i < info.fileList.length; i++) { // 校验数组对象中的lastModified是否存在重复数据
let item = info.fileList[i]
for (let j = i + 1; j < info.fileList.length; j++) {
let ele = info.fileList[j]
if (item.lastModified == ele.lastModified) { find = true; break;}
}
if (find) break;
}
// console.log(find)
if(find){ // 返回true存在重复数据,false不存在重复数据
proxy.$message.error('请勿重复上传相同文件!!!')
}
// 去重数组中相同的对象数据
let remObj = {};
info.fileList = info.fileList.reduce((cur:any,next:any) => {remObj[next.lastModified] ? "" : remObj[next.lastModified] = true && cur.push(next);
return cur;
},[]); //设置cur默认类型为数组,并且初始值为空的数组
remObj = {};
fileList.value = info.fileList.reduce((cur:any,next:any) => {remObj[next.lastModified] ? "" : remObj[next.lastModified] = true && cur.push(next);
return cur;
},[]); //设置cur默认类型为数组,并且初始值为空的数组
emit('onchangUpload', info)
};
return {
handleChange,
fileList,
};
},
})
</script>
回到主页面开始调事件:
computeMD5()方法的使用查看:文件上传md5计算
setup(){
const state = reactive<any>({
// 上传参数
ShowUpload:false,
FileObj:[], // 存储上传的文件
uploadTimers: new Date().getTime(),// 刷新避免存在缓存
})
/**
* 上传获取文件事件
* @res 上传的文件数据
* */
const onChangUploadDragger = (res:any) =>{
// console.log('父组件调用打印:')
state.FileObj = computeMD5(res.fileList)
// console.log(state.FileObj)
};
/**
* 确认上传事件
* @param ShowUpload 隐藏上传弹窗
* */
const ConfiromUpload = ()=>{
if(state.FileObj.namelist.length == 0){
proxy.$message.error('请先上传文件再进行确认!')
return
}
state.ShowUpload = false // 关闭弹窗
state.FileObj.namelist.forEach((item:any, index: any)=>{
let size = state.FileObj.fileSizelist[index]
let md5 = state.FileObj.md5list[index]
let params = {
fileName: item,
fileSize: size,
fileMd5: md5
}
let file = state.FileObj.Filelist[index] // 获取文件流
SaveCommitUpload(params, file) // 写入提交文件上传请求事件;
})
};
/**
* 写入提交文件上传请求事件
*@params 请求参数
*@file 文件流数据
* */
const SaveCommitUpload = (params: any, file: any) =>{
$http.getCommitUpload(params).then((res) => { // 请求后端返回的七牛云token和其他参数
UploadFilesQiniuCloud(file, res.config); //上传文件到七牛云事件
}
}).catch((err) => {})
};
/**
* 上传文件到七牛云事件
*@file 文件流数据
*@res 回调返回的文件上传数据
*@Callback 请求成功后请求的文件上传结果事件
* */
const UploadFilesQiniuCloud = (file:any, res:any) =>{
// console.log(file)
// console.log(res)
// return
const key = res.key // 上传文件名
const token = res.tempToken // 七牛云token
const observer = {
next: (response: any) => {
console.log('上传进度'+Math.floor(response.total.percent)+'%')
// console.log(response)
},
error: (err: any) => {
// 失败
proxy.$message.error('上传失败:' + err.message)
console.log(err)
},
complete: (response:any) => {
// 成功回调
console.log(response)
}
}
const putExtra: Object = {
fname: file.name, //上传文件名称
params: {},
mimeType: file.type, // 文件类型
// mimeType: ['image/png', 'image/jpeg', 'image/gif']
}
const config = {
useCdnDomain: true,
region: qiniu.region.z2, // 所在地域 这个可以问问后端域名所属区域(我这个是华南)
chunkSize: res.config.chunkSize // 这个是切片大小,一般默认是4
}
const observable = qiniu.upload(file, key, token, putExtra, config)
observable.subscribe(observer) // 上传开始
};
return {
...toRefs(state),
onChangUploadDragger,
ConfiromUpload,
}
}
至此七牛云的上传就完成了,需要注意的七牛云的token是从后端获取的,前端拿着token才能去访问七牛云并将文件上传上去;
代码写的比较冗余,请多多见谅。主要是为自己记录的哈
更多推荐
已为社区贡献6条内容
所有评论(0)